vue 更改NODE_ENV,根据不同环境打包到不同的文件夹下
下面拿vue项目做个改动1.安装cross-envcnpm icross-env -D2.package.json配置不同环境下打包的命令{..."scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","build":...
下面拿vue项目做个改动
1.安装cross-env
cnpm i cross-env -D
2.package.json配置不同环境下打包的命令
{
...
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "cross-env NODE_ENV=production node build/build.js",
"PublishTest": "cross-env NODE_ENV=PublishTest node build/build.js"
"Release": "cross-env NODE_ENV=Release node build/build.js"
},
}
命令解释:
npm run build: 打包到dist目录下,测试环境使用
npm run PublishTest: 打包到PublishTest目录下,预发布环境下使用
npm run Release: 打包到Release目录下,正式环境使用
3.config/index.js修改
module.exports = {
dev: {... },
build: {...},
// 正式环境下打包到Release文件夹下,复制上面build:{...}的代码,将index和assetsRoot的文件路径改下就行
Release: {
index: path.resolve(__dirname, '../Release/index.html'),
assetsRoot: path.resolve(__dirname, '../Release'),
// 以下配置同build
...
},
// 预发布环境下打包到PublishTest文件夹下
PublishTest: {
index: path.resolve(__dirname, '../PublishTest/index.html'),
assetsRoot: path.resolve(__dirname, '../PublishTest'),
// 以下配置同build
...
}
}
4.build/build.js修改
注释掉 process.env.NODE_ENV = 'production'
'use strict'
require('./check-versions')()
// process.env.NODE_ENV = 'production'
...
5.build/webpack.base.cof.js修改
1.将config.build做成可配置的configEnv
2. 将path和publicPath更改下
'use strict'
...
/*将config.build做成根据不同环境下的配置*/
const configEnv = process.env.NODE_ENV === 'production'
? require('../config').build
: process.env.NODE_ENV === 'Release'
?require('../config').Release
:require('../config').PublishTest
/*将path和publicPath更改下*/
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
...
},
output: {
path:configEnv.assetsRoot ,
...
publicPath: configEnv.assetsPublicPath
},
resolve: {...},
plugins: [ ... ],
module: {...},
node: {... }
}
6.build/webpack.prod.cof.js修改
1.将config.build做成可配置的configEnv ,并且将页面上所有的config.build替换成configEnv
2. new webpack.DefinePlugin里面添加‘process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
'use strict'
...
/*将config.build做成根据不同环境下的配置,并且将页面上所有的config.build替换成configEnv*/
const configEnv = process.env.NODE_ENV === 'production'
? require('../config').build
: process.env.NODE_ENV === 'Release'
?require('../config').Release
:require('../config').PublishTest
const webpackConfig = merge(baseWebpackConfig, {
module: {...},
devtool: configEnv.productionSourceMap ? configEnv.devtool : false,
output: {... },
plugins: [
...
/* 允许创建一个在编译时可以配置的全局常量 */
new webpack.DefinePlugin({
// 'process.env': env,
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
....
]
})
module.exports = webpackConfig
以上配置完就ok了(当然有兴趣的小可爱可以再优化优化config/index.js代码),最后运行命令
npm run build: 打包到dist目录下,测试环境使用
npm run PublishTest: 打包到PublishTest目录下,预发布环境下使用
npm run Release: 打包到Release目录下,正式环境使用
更多推荐
所有评论(0)