vue+webpack多环境打包配置(不同环境不同命令)

 以前在打包项目,会写三个环境地址,打包前都需要手动切换地址,实现多环境打包配置后可以省掉这一步。  

本文来谈一谈多环境打包的配置方法(本人是一枚前端小透明,用的方法不是最优,若有更优的,欢迎指教) 

原文参考链接: https://blog.csdn.net/zuoyiran520081/article/details/80812788

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、修改根目录下的package.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的修改,此时得修改

 各个地方关于环境的判断

(3)此时,打包项目后,打开index.html文件,项目中的一些图标可能会是404,这时修改build文件夹下的utils.js文件,

原代码:

修改后:

 

这时再打包,图标的路径就是正确的了。

整体而言配置多环境打包不复杂,主要是需要配置的文件多,希望有更好方案的来分享 

  • 4
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值