vue多环境打包

                                                                     

               

 因为项目需要，vue需要打包到三个环境下，为了减少人工时间就从网上找了篇博客，分享一下。

原文参考链接： https://blog.csdn.net/qq_39696861/article/details/81502464

1、在根目录下 的config文件夹下新建test.env.js文件

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  ENV_CONFIG: '"test"'
}

2、修改config文件夹下的prod.env.js文件 

原代码： 

'use strict'
module.exports = {
  NODE_ENV: '"production"'
}

修改后： 

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"'
}

​​​​​​​注意：NODE_ENV与ENV_CONFIG的参数都是单引号包双引号，否则会报错 

3、修改build文件夹下的webpack.prod.conf.js

原代码： 

// const env = require('../config/prod.env') 

修改后：  

const env = config.build[process.env.env_config + 'Env']

 4、修改config文件夹下的index.js文件中的build部分的代码

原代码： 

build: {
  // Template for index.html
  index: path.resolve(dirname, '../dist/index.html'),
 
  // Paths
   ...  //  省略部分代码
}

​​​​​​​修改后： 

build: {
  testEnv: require('./test.env'), // 新增
  prodEnv: require('./prod.env'), // 新增
  // Template for index.html
  index: path.resolve(dirname, '../dist/index.html'),
 
  // Paths
  ...  // 省略部分代码
}

5、确认安装cross-env （cross-env能跨平台地设置及使用环境变量）

 windows不支持NODE_ENV=development的设置方式。在windows平台下使用类似于: NODE_ENV=production的命令行指令会卡

住，windows平台与POSIX在使用命令行时有许多区别（例如在POSIX，使用$ENV_VAR,在windows，使

用%ENV_VAR%。。。）。cross-env无需担心跨平台问题

npm安装方式：npm i --save-dev cross-env

 6、修改build文件夹下的build.js

原代码： 

'use strict'
require('./check-versions')()
 
process.env.NODE_ENV = 'production'
 
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
 
const spinner = ora('building for production...')
spinner.start()
... // 省略部分代码

修改后： 

'use strict'
require('./check-versions')()
 
// process.env.NODE_ENV = 'production' // 此处注释掉
 
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
 
// const spinner = ora('building for production...') // 此处修改成下面代码
const spinner = ora('building for' + process.env.NODE_ENV + 'of' + process.env.env_config + 'mode...')
spinner.start()
 

​​​​​​​ 7、修改根目录下的webpack.json的scripts

原代码： 

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "lint": "eslint --ext .js,.vue src",
  "build": "node build/build.js"
}

修改后： 

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "lint": "eslint --ext .js,.vue src",
  "build": "node build/build.js",
  "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js", // 新增
  "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js" // 新增
}

​​​​​​​8、在根目录的src下面新增一个文件夹和js文件用作配置接口参数 

 config.js设置接口参数，并将变量暴露出来

// 注：下面的baseURL地址为假地址，可以将它们打印出来查看是否打包正确
let baseURL = ''
if (process.env.NODE_ENV === 'development') {
  baseURL = 'https://100.100.100.101/dev' // 开发
} else if (process.env.NODE_ENV === 'testing') {
  baseURL = 'https://100.100.100.102/test' // 测试
} else if (process.env.NODE_ENV === 'production') {
  baseURL = 'https://100.100.100.103/prod' // 线上环境
}
 
export {
  baseURL
}

​​​​​​​9、 打包时可能会遇到的问题

（1）打包完毕后可能会有出现页面空白 

页面空白时，先F12查看是否路径错误，

若路径错误，则需将 根目录config下index.js中的build的assetsPublicPath：‘/’ 改为：assetsPublicPath：‘./’

但是此时会有另外一个问题，使用 npm run build--test 的时候 ，因为没有配置testing时的路径，因此会默认是'/'，此时可以在

根目录build文件夹下的webpack.base.conf.js的output中增加一个判断，将testing的路径指定到prod 

原代码： 

output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath
}
 

​​​​​​​修改后：

output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : (process.env.NODE_ENV === 'testing' ? config.build.assetsPublicPath : config.dev.assetsPublicPath) //增加判断
}

​​​​​​​（2）为了防止万一，可以将配置开发环境和prod环境的相关判断中都加上testing环境的判断：根目录下build文件夹下的

vue-loader.conf.js和utils.js文件 ，当然现在不改还没有发现问题

如果想另外配置test环境，可以在根目录build文件夹下新建webpack.test.conf.js和test.js，可以根据prod的修改，此时得修改

 各个地方关于环境的判断。