Vue-cli3配置说明

关于代理以及process.env.使用和说明

"scripts": {
    "dev": "vue-cli-service serve --port 4000 --mode dev",
    "build": "vue-cli-service build",
    "build:prod": "vue-cli-service build --mode prod",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
}

以上是package.json中的一段脚本。可看到我们的运行命令后面就会跟着mode，mode对应的值分别都有对应的文件，如上mode分别有dev、prod、test三种模式，对应的项目中就会有三个文件.env.dev、.env.prod、.env.test。文件中的内容如下：

NODE_ENV=development
VUE_APP_BASE_URL=//test.project.cn/

当我们运行npm run dev的时候就会获取到对应的.env.dev文件中的内容，访问方式就是process.env.NODE_ENV以及process.env.VUE_APP_BASE_URL，其他两个命令和文件也是同样的对应关系。需要注意的是内容的键值最好以VUE_APP_开头。
通过这种方式，我们可以判断当前环境、对应的后端api访问地址以及其他针对环境会有所不同的参数配置（比如title等等）。
另外在本地通常会进行devServer的代理，所以一般本地运行（即dev环境）的时候，.env.dev的环境变量中后端api访问地址没必要写域名，可以参考如下配置：

NODE_ENV=production
VUE_APP_BASE_URL=/api/

然后vue.config.js中进行代理即可，配置如下：

devServer: {
    proxy: {
      '/api': {
        target: 'http://test.project.cn/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
   }
}

vue.config.js中的publicPath
vue.config.js中的publicPath主要是用来配置项目路径的，一般配置成'/'即可，如果配置成了'/app'，那么打包出来的文件就会多一个app文件夹，访问的路径也会变成http://test.project.cn/app/。所以一般来说根据项目而定，如果项目部署在子目录中，那可以利用publicPath这个参数，大多数情况下不需要使用。

项目中的.gitignore文件
该文件主要用于提交git的时候标注忽略文件用的，包括具体文件、文件夹、某一类型的文件等等都可以使用。