解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

下面是详细讲解“解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题”的完整攻略。

解决Vue-cli3没有vue.config.js文件夹的问题

Vue-cli3是一个快速构建Vue项目的脚手架工具，但有时可能会出现没有vue.config.js文件夹的情况。出现这种情况的原因可能是我们没有手动创建该文件夹，或者我们的项目是从旧版升级过来的，而vue.config.js是Vue-cli3新加的配置文件。

解决这个问题的方法很简单，只需要手动在项目根目录下创建一个vue.config.js文件夹即可。如果也没有这个文件夹，那就在根目录下新建一个。

touch vue.config.js

我们也可以通过脚本创建：

echo "module.exports = {}" > vue.config.js

然后我们就会在项目根目录下看到vue.config.js文件夹了。

配置Vue项目的域名

在Vue-cli3中，如果我们需要配置项目的域名，可以通过vue.config.js文件来实现。

我们可以在vue.config.js文件中添加以下代码：

module.exports = {
  devServer: {
    port: 8080,
    host: "localhost",
    https: false,
    open: true,
    proxy: {
      "/api": {
        target: "",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};

上面的代码是配置开发服务器的，其中包含了一些属性，如port、host、https、open和proxy等。

我们可以通过host属性来配置项目的域名。在这里，我们将host属性设置为"localhost"，表示项目的域名是localhost。我们还可以设置https属性，将其设置为true，表示允许https协议访问。

示例1：

如果我们想将项目域名配置为"www.example.com"，我们可以将host属性设置为"www.example.com"：

module.exports = {
  devServer: {
    port: 8080,
    host: "www.example.com",
    https: false,
    open: true,
    proxy: {
      "/api": {
        target: "",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};

示例2：

如果我们想将项目域名配置为"www.example.com"，但是我们的开发环境无法直接访问该域名，需要使用代理服务器进行访问，那么我们可以将proxy属性进行配置。

例如，我们的代理服务器地址为"http://proxy.example.com"，则可以将vue.config.js配置为以下内容：

module.exports = {
  devServer: {
    port: 8080,
    host: "www.example.com",
    https: false,
    open: true,
    proxy: {
      "/api": {
        target: "http://proxy.example.com",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};

这样，我们的开发环境就可以通过代理服务器进行访问，达到配置项目域名的目的。

以上就是解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题的完整攻略。