vue-cli打包配置不同的开发和生成环境

新建 .env.development和 .env.production

2. .env.development文件内容

# just a flag
ENV = 'development' //开发模式

# base api
VUE_APP_BASE_API = '/dev-api' //------------->可以通过process.evn.xxx访问

# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js

VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production文件内容

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = ''

# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js

VUE_CLI_BABEL_TRANSPILE_MODULES = true

3.在程序中如何访问

例如，create一个axios对象，并且baseURL为(步骤2)中两个文件设置的VUE_APP_BASE_API。

开发环境下VUE_APP_BASE_API==='/dev-api'，生成环境下VUE_APP_BASE_API===''

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, 
  timeout: 60000, // request timeout
  withCredentials: true, // 携带cookie
  crossDoMain: true // 跨域
})

4.开发模式下，vue中的代理，跨域

pathRewrite下，^/dev-api 的值，必须等于VUE_APP_BASE_API。注：^ 表示已某某开头

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/dev-api': {
        // target: 'http://118.25.139.110:8088/', // target host
        target: 'http://api.thdtek.com', // target host
        // target: 'http://192.168.1.211:8080/', // target host
        ws: true, // proxy websockets
        changeOrigin: true, // needed for virtual hosted sites
        pathRewrite: {
          '^/dev-api': '' // rewrite path //---------------------->重写的路径值
        }
      }
    }
  },
 
}