vue-cli+webpack打包及运行到不同环境

96
任雨丶
2017.11.17 10:36* 字数 285

标签: 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,
  });
}
  • 总结
    这个方法就是解决在我们运行程序时,有时需要手动注释一些代码,在打包时取消这注释或者换成别的问题。
webpack
Web note ad 1