vue cli3 分环境打包详细步骤

打包时线上环境可能分多种，比如测试环境和生产环境等等。

直接上步骤。

一：package.json添加 “build-test ”build-prod”:

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

二：在项目根目录添加文件“.env.test”，其内容：NODE_ENV = ‘test’

NODE_ENV = 'test'

三：新建‘setBaseUrl.js’ 文件 用来设置url，其内容：

// 这里是一个默认的url，可以没有
let baseUrl = ''
switch (process.env.NODE_ENV) {
  case 'development':
    baseUrl = '本地的请求url地址' // 这里是本地的请求url
    break
  case 'test': // 注意这里的名字要和步骤二中设置的环境名字对应起来
    baseUrl = '测试环境中的url地址' // 这里是测试环境中的url
    break
  case 'production':
    baseUrl = '生产环境url地址' // 生产环境url
    break
}

export default baseUrl

四：在请求中引入设定的url，我这里用的是main.js，所以在main.js文件中引入并使用

import axios from 'axios'
import baseUrl from './setBaseUrl'

// 是否允许携带cookie
// axios.defaults.withCredentials = true
axios.defaults.baseURL = baseUrl

五：最后，测试一下是否设置成功

npm run serve  查看Network 里面的请求地址是否已经变为步骤三里面的地址

别慌，还有一点vue.config.js里面的配置，在此处记录一下。

// 输出目录文件名配置
// eslint-disable-next-line no-unused-vars
let outputDir = 'qy_new'  // 这里的qy_new是打包出来的文件夹名
if (process.env.NODE_ENV === 'production') {
  outputDir += 'prod'
} else if (process.env.NODE_ENV === 'test') {
  outputDir += 'test'
}
module.exports = {
  publicPath: './',
  // 输出文件目录
  outputDir: outputDir,
  // 生产环境去掉console.log
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  }
}