标签： webpack,vue
1.需求描述
vue脚手架中，有两个命令，一个是npm run dev，这个命令是本地开发用的；第二个命令是npm run build，这个命令是打包用的。如果现在有两个环境，一个是开发版环境，一个是上线的环境，两个用的不同的url地址，那么每次运行两个npm命令时，都需要手动修改url地址，这样带来了很大的风险。
2.问题解决
-
思路
配置四个命令- 开发版打包运行npm run develop
- 线上打包运行npm run build
- 本地测试开发版npm run dev
- 本地测试线上环境npm run online
先看packa.json配置
"scripts": {
"dev": "node build/dev-server.js",//本地测试的运行命令
"start": "node build/dev-server.js",
"build": "node build/build.js",//打包的运行命令
"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中添加两个命令
"online": "node build/dev-server.js",//本地测试线上环境运行命令
"develop": "node build/build.js",//开发版打包运行命令
- 在build/dev-server.js中加入以下代码
var replace = require("replace2");//引入一个replace2的插件，使用前npm install --save relace2.js
const target = process.env.npm_lifecycle_event;//判断运行了哪个命令
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,
});
}
- 总结
这个方法就是解决在我们运行程序时，有时需要手动注释一些代码，在打包时取消这注释或者换成别的问题。
