vue-cli4 配置多环境打包

1.新建的项目 vue.config.js 可以直接复制

module.exports = {
    // 基本路径
    publicPath: "./",
    // 输出文件目录
    outputDir: process.env.outputDir,
    lintOnSave: false,
    devServer: { //启动项目在8080端口自动打开
        open: true,
        port: 8080,
        proxy: null
    },
    configureWebpack: config => {
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
};

然后在项目的根目录新建以下文件

代码

// .env.dev
 
NODE_ENV = 'development'
VUE_APP_URL_ENV = 'development'
outputDir = 'dist'

// .env.production
 
NODE_ENV = 'production'
VUE_APP_URL_ENV = 'production'
outputDir = 'dist'

// .env.testing
 
NODE_ENV = 'testing'
VUE_APP_URL_ENV = 'testing'
outputDir = 'dist'

设置baseurl

// 'use strict';
let BASE_URL = ''

if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://172.16.10.202:8089' // 测试
} else if (process.env.NODE_ENV === 'testing') {
  BASE_URL = 'http://www.baidu.com' 
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'https://h.yltcloud.com' 
}
// npm run serve 测试运行
// npm run build 线上打包
// npm run test 打包
// npm run dev 线上运行
// console.log(BASE_URL)

//导出
export default BASE_URL

最后package.json中

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