1.需要安装下载cross-env;
npm i --save-dev cross-env
2.在vue项目目录下的config文件夹下创建文件
当前项目分为四种环境:开发环境(dev)、测试环境(test)、预生产环境(pre)、生产环境(prod);
由于config文件下已经存在了开发环境和生产环境的文件,后期只需要修改内容即可,所以需要再创建test和pre的文件,
3.编写各个环境的域名
//dev.env.js
'use strict'
module.exports = {
NODE_ENV: '"dev"',
ENV_CONFIG: '"dev"',
BASE_URL: '"http://***.***.*.**"', //开发环境
}
//test.env.js
'use strict'
module.exports = {
NODE_ENV: '"test"',
ENV_CONFIG: '"test"',
BASE_URL: '"http://***.***.*.**"', //测试环境
}
//pre.env.js
'use strict'
module.exports = {
NODE_ENV: '"pre"',
ENV_CONFIG: '"pre"',
BASE_URL: '"http://***.***.*.**"', //预生产环境
}
//prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"prod"',
ENV_CONFIG: '"prod"',
BASE_URL: '"http://***.***.*.**"', //生产环境
}
4.修改config目录下的index.html文件
在build里面新增四种参数,在webpackage.prod.conf.js中使用
build: {
//根据不同命令进行打包修改testEnv,devEnv,preEnv,prodEnv
testEnv: require('./test.env'),//开发环境
devEnv: require('./dev.env'), //测试环境
preEnv: require('./pre.env'), //预生产环境
prodEnv: require('./prod.env'), //生产环境
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
}
5.修改build目录下的webpack.dev.config.js
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
//定义一个常量env
const env = process.env.env_config
//更改process.env的依赖地址
const devWebpackConfig = merge(baseWebpackConfig, {
module:{...},
devtool:...,
devServer:{...},
plugins:[
new webpack.DefinePlugin({
'process.env': require('../config/' + env + '.env')//更改依赖地址
}),
...
]
})
6.修改build目录下的webpack.prod.conf.js
更改env的生成方式
// const env = require('../config/prod.env')//这是未配置之前的,需要猪是
const env = config.build[process.env.env_config + 'Env'] //根据不同命令生成对应的env的值
7.修改项目package.json文件
"scripts": {
"dev-dev": "cross-env NODE_ENV=dev env_config=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"dev-test": "cross-env NODE_ENV=test env_config=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"dev-pre": "cross-env NODE_ENV=pre env_config=pre webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"dev-prod": "cross-env NODE_ENV=prod env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build-dev": "cross-env NODE_ENV=dev env_config=dev node build/build.js",
"build-test": "cross-env NODE_ENV=test env_config=test node build/build.js",
"build-pre": "cross-env NODE_ENV=pre env_config=pre node build/build.js",
"build-prod": "cross-env NODE_ENV=prod env_config=prod node build/build.js"
},
//dev-开头的是项目运行的不同环境的命令,build-开头的是打包成不同环境的命令
例如:运行开发环境:npm run dev-dev
8.修改build目录下的build.js
下面代码是直接复制的,
注释一行代码:process.env.NODE_ENV = 'production'
spinner重新定义 const spinner = ora('building for' + process.env.NODE_ENV + 'of' + process.env.env_config + 'mode...')
'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,所以这里也需要注释
const spinner = ora('building for' + process.env.NODE_ENV + 'of' + process.env.env_config + 'mode...')//重新定义spinner
spinner.start()
9.完成
10.补充
我竟然忘记了一步操作,sorry~
修改webpack.base.conf.js