vuecli3构建项目全过程（二）配置文件

系列文章目录

vuecli3构建项目全过程（一）之初始化项目

文章目录

一、vue.config.js

二、配置跨域

三、开发环境和正式环境配置

---

 

接上章继续，当出现这个页面的时候表示你可以随心所欲开始写你的页面了。

新项目没有配置文件，需要在根目录下新建vue.config.js文件，配置的内容可以参考官方文档配置参考 | Vue CLIhttps://cli.vuejs.org/zh/config/#vue-config-js 

一、vue.config.js

这里主要讲几个常用的配置项，剩下的按需配置吧。

1. publickPath：部署应用包时的基本 URL，默认为根目录，如果是部署在子路径里，则需要与最后的部署位置保持一致。
2. devServer：主要用来配置跨域，支持多个跨域地址；
3. configureWebpack：对webpack做一些配置更改，这里我用来设置别名。有时候引用的层级太深，层层嵌套显得引用的文件地址太长，通过设置resolve里的alias，让引用文件地址显得更整齐简短。

二、配置跨域

代码如下：

 devServer: {
    host: '0.0.0.0',    //热更新
    prot: 9091,
    proxy: {
      '/dev-api': {
        target: '接口地址',
        ws: true,    //代理websockets
        changeOrigin: true    //是否跨域，
        pathRewrite: '^/dev-api': '/'    //路径重写
      }
    }
  }

 如果项目不存在多个跨域，可以在request文件里，配置全局的baseURL为/dev-api。

多个跨域配置如下：

 devServer: {
    host: '0.0.0.0',    //热更新
    prot: 9091,
    proxy: {
      '/dev-api': {
        target: '接口地址',
        ws: true,    //代理websockets
        changeOrigin: true    //是否跨域，
        pathRewrite: '^/dev-api': '/'    //路径重写
      },
      '/foo': {
        target: '接口地址
      }
    }
  }

api文件配置对应的跨域路径

三、开发环境和正式环境配置

        在根目录下新建.env.development和.env.production文件，分别代表开发环境配置、正式环境配置。由于开发环境的接口地址与正式环境的不同，在这两个文件里分别配置后，就可以在不同的环境下访问接口。

.env.development文件

ENV = 'development'
# title
VUE_APP_TITLE='浏览器标签上显示的系统名称'
# base api
VUE_APP_BASE_API = '/dev-api'

.env.production文件

ENV = 'production'
# title
VUE_APP_TITLE='浏览器标签上显示的系统名称'
# base api
VUE_APP_BASE_API = '/api/video'    //正式环境接口统一前缀

        production 模式用于 vue-cli-service build，如果你想要在构建命令中使用开发环境变量，还可以通过传递 --mode 选项参数为命令行覆写默认的模式。

//package.json

vue-cli-service build --mode development