vue-cli4 初始配置

vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。

配置 proxy 跨域

vue.config.js下的devServer=》proxy配置跨域请求

module.exports = {
  devServer: {
   open: false, // 自动启动浏览器
   host: '0.0.0.0', // localhost
   port: 6060, // 端口号
   hotOnly: false, // 热更新

   overlay: {
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    },
    proxy: {
      //配置跨域
      '/api': {
        target: 'https://www.test.com', // 接口的域名
        // ws: true, // 是否启用websockets
        changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}

配置完成后，当我们在去请求www.test.com/v1/api/user… 接口时，就可以这么写

this.axios({
    url:'/api/v1/api/userinfo',
    method:'get'
}).then(res=>{
//......
})

多环境配置

官方文档

在项目根目录下新建 .env.development （开发环境）

//开发环境
NODE_ENV='development'
VUE_APP_URL= "http://192.168.1.17:8888"

在项目根目录下新建 .env.production （线上环境）

//正式环境
NODE_ENV='production'
VUE_APP_URL= "http://192.168.1.17:9999"

package.json 配置

"scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service serve"
  },

关于文件内容：

注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX，否则不进行编译

JS中使用

JS或在对axios封装时，可以通过 process.env.NODE_ENV 获取环境名；通过 process.env.VUE_APP_URL 获取环境对应的url。

配置 alias 别名

使用vue-cli开发项目，最大特色是组件化。组件中频繁引用其他组件或插件。我们可以把一些常用的路径定义成简短的名字。方便开发中使用。

const path = require('path')//引入path模块
const resolve = dir => path.join(__dirname, dir)//path.join(__dirname)设置绝对路径

module.exports = {
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
  }
}

配置完成后，我们在项目中可以这样写路径

//之前这么写
import Home from '../views/Home.vue'
//配置alias别名后
import Home from 'views/Home.vue'
//也可以这么写
import Home from '@/views/Home.vue'