静态资源部署到独立的服务器可以减轻服务器带宽压力
所谓静态资源:static目录下的文件
项目需求背景:
1. 项目环境分为测试环境、预发布环境、生产环境
2. 不同的环境,静态资源存放的路径不一致,每次打包都需要更改路径,容易忘记切换路径
解决方法:根据不同环境配置不同打包命令,实现路径切换
安装cross-env
npm install cross --save
配置打包命令对应的环境变量
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build-test": "cross-env NODE_ENV=test node build/build.js", // 测试
"build-pre": "cross-env NODE_ENV=pre node build/build.js", // 预发布
"build": "cross-env NODE_ENV=production node build/build.js"// 生产
}
修改config/index.js
不同环境服务器地址
const assetsPath = {
'test': '//192.16.***.**/test/',
'pre': '//192.16.***.**/pre/',
'production' : '//192.16.***.**/production/'
}
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: assetsPath[process.env.NODE_ENV], // 获取到不同环境的地址
}
// 修改webpack.base.js
const NODE_ENV = process.env.NODE_ENV
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: (NODE_ENV === 'production' || NODE_ENV === 'test' || NODE_ENV === 'pre') ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
根据不同的环境,执行不同的打包命令
测试环境:npm run build-test
预发布: npm run build-pre
生产: npm run build