標(biāo)簽： webpack,vue
1.需求描述
vue腳手架中，有兩個(gè)命令，一個(gè)是npm run dev，這個(gè)命令是本地開發(fā)用的；第二個(gè)命令是npm run build，這個(gè)命令是打包用的。如果現(xiàn)在有兩個(gè)環(huán)境，一個(gè)是開發(fā)版環(huán)境，一個(gè)是上線的環(huán)境，兩個(gè)用的不同的url地址，那么每次運(yùn)行兩個(gè)npm命令時(shí)，都需要手動(dòng)修改url地址，這樣帶來了很大的風(fēng)險(xiǎn)。
2.問題解決
-
思路
配置四個(gè)命令- 開發(fā)版打包運(yùn)行npm run develop
- 線上打包運(yùn)行npm run build
- 本地測試開發(fā)版npm run dev
- 本地測試線上環(huán)境npm run online
先看packa.json配置
"scripts": {
"dev": "node build/dev-server.js",//本地測試的運(yùn)行命令
"start": "node build/dev-server.js",
"build": "node build/build.js",//打包的運(yùn)行命令
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
}
- 在packa.json的script中添加兩個(gè)命令
"online": "node build/dev-server.js",//本地測試線上環(huán)境運(yùn)行命令
"develop": "node build/build.js",//開發(fā)版打包運(yùn)行命令
- 在build/dev-server.js中加入以下代碼
var replace = require("replace2");//引入一個(gè)replace2的插件，使用前npm install --save relace2.js
const target = process.env.npm_lifecycle_event;//判斷運(yùn)行了哪個(gè)命令
if (target === "dev") {
//測試
replace({
regex: "http://www\.a\.com",//此處為被替換的值
replacement: "http://www\.b\.com",//此處為你替換成什么值
paths: ['./src/assets/scripts/fdModel.js'],//此處為你替換的值得路徑
recursive: false,
silent: false,
});
}else if(target === "online") {
replace({
rgex: "http://www\.a\.com",//此處為被替換的值
replacement: "http://www\.b\.com",//此處為你替換成什么值
paths: ['./src/assets/scripts/fdModel.js'],//此處為你替換的值得路徑
recursive: false,
silent: false,
});
}
- 打包
在package.json中加入
"prebuild": "node build/prebuild.js",
在build/prebuild.js中新建prebuild.js
var replace = require("replace2");
const target = process.env.npm_lifecycle_event;
if (target === "predevelop") {
//測試
replace({
rgex: "http://www\.a\.com",//此處為被替換的值
replacement: "http://www\.b\.com",//此處為你替換成什么值
paths: ['./src/assets/scripts/fdModel.js'],//此處為你替換的值得路徑
recursive: false,
silent: false,
});
}else {
//線上
replace({
rgex: "http://www\.a\.com",//此處為被替換的值
replacement: "http://www\.b\.com",//此處為你替換成什么值
paths: ['./src/assets/scripts/fdModel.js'],//此處為你替換的值得路徑
recursive: false,
silent: false,
});
}
- 總結(jié)
這個(gè)方法就是解決在我們運(yùn)行程序時(shí)，有時(shí)需要手動(dòng)注釋一些代碼，在打包時(shí)取消這注釋或者換成別的問題。
