vue-cli3.0 配置事项

vue-cli3 使用环境变量--mode参数分环境开发和打包

http://www.cnblogs.com/alantao/p/10282477.html

https://cli.vuejs.org/zh/guide/mode-and-env.html

https://blog.csdn.net/hoyche/article/details/90230527

 

环境变量

https://segmentfault.com/a/1190000015133974

 

本地开发代理cookie解决

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      // 可以使用正则，.*代表所有访问都代理
      '/api': {
        target: 'https://mufeng.me',
        changeOrigin: true,
        onProxyReq (proxyReq, req, res) {
          const cookie = req.headers['cookie']
          if (cookie) {
            proxyReq.setHeader('cookie', cookie)
          }
        },
        onProxyRes(proxyRes, req, res) {
          if (proxyRes.headers['set-cookie']) {
            let originHost = req.headers['x-forwarded-for']
            proxyRes.headers['set-cookie'] = proxyRes.headers['set-cookie'].map(v => {
              // 域名信息与实际业务相关
              return v.replace('domain=.mufeng.me', 'domain=' + originHost.split(':')[0])
            })
          }
        }
      }
    }
  }
}

 

DefinePlugin添加编译时替换，可以实现选择性的编译

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config
            .plugin('define')
            .tap(args => { 
                args[0].API_CONFIG = JSON.stringify(apiConfig)
                return args
            })
    }
}

 

开发环境启用vue-devtools的注意事项：

1. 全局配置Vue.config.devtools = true; development环境默认为true

2. 引入的vue.js库必须是非压缩版