vue-cli+webpackパッケージおよび異なる環境への実行

ラベル:webpack,vue
1.需要説明
vue足場には、npm run devという2つのコマンドがあり、このコマンドはローカル開発用です.2番目のコマンドはnpm run buildで、このコマンドはパッケージ用です.現在2つの環境があり、1つは開発版環境、1つはオンライン環境、2つは異なるurlアドレスを使用している場合、2つのnpmコマンドを実行するたびにurlアドレスを手動で変更する必要があり、大きなリスクをもたらします.
2.問題解決

構想構成4つのコマンド

開発版パッケージ実行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に2つのコマンド

を追加

"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,
    });
}

パッケージパッケージ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,
  });
}

この方法は、プログラムを実行するときに、手動でコードを注釈する必要がある場合があり、パッケージ化時にこの注釈をキャンセルしたり、別の問題に変換したりすることを解決することです.