VUE項目多環境配置.md

目錄

• 1、瞭解webpack.DefinePlugin
• 2、項目中如何配置多環境

web項目開發，一般須要有開發環境、測試環境和生產環境，用於配置不一樣的環境變動，如調用本地接口、測試接口和生產接口，VUE項目是先後端徹底分離的框架，像是web界的C/S構架，在作VUE前端開發時，就須要用開發環境甚至於mock環境，等項目上線時，則須要使用生產的環境變量進行打包部署。

1、瞭解webpack.DefinePlugin

webpack是靜態模塊打包器，能夠將vue項目中全部文件打包成一個或多個jsbundle，其中webpack.DefinePlugin在項目編譯時可定義全局常量，應用在項目任何地方。

new webpack.DefinePlugin({
  // Definitions...
})

用法：

每一個傳進 DefinePlugin 的鍵值都是一個標誌符或者多個用 . 鏈接起來的標誌符。

• 若是這個值是一個字符串，它會被看成一個代碼片斷來使用。
  - 若是這個值不是字符串，它會被轉化爲字符串(包括函數)。
  - 若是這個值是一個對象，它全部的 key 會被一樣的方式定義。
  - 若是在一個 key 前面加了 typeof,它會被定義爲 typeof 調用。

這些值會被內聯進那些容許傳一個代碼壓縮參數的代碼中，從而減小冗餘的條件判斷。

// webpack.js
new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: "1+1",
  "typeof window": JSON.stringify("object")
})

// index.js
if (!PRODUCTION) {
  console.log('Debug info')
}

if (PRODUCTION) {
  console.log('Production log')
}

注意，由於這個插件直接執行文本替換，給定的值必須包含字符串自己內的實際引號。一般，有兩種方式來達到這個效果，使用 '"production"', 或者使用 JSON.stringify('production')。

官方文檔：https://www.webpackjs.com/plugins/define-plugin/

2、項目中如何配置多環境

1. 定義webpack多環境配置文件

經過修改根目錄的npm配置文件package.json，經過--config設置webpack執行腳本
瞭解了webpack.DefinePlugin，回到咱們的項目中來，項目使用官方vue-cli進行初始化框架，能夠看到初始化的項目中會有build和config兩個文件夾，詳細文件以下：

其中webpack.dev.conf.js和webpack.prod.conf.js對應的是webpack不一樣環境下的打包配置，dev是開發環境，開啓了調試功能，而prod是生產環境，可以使用各類插件進行項目優化，好比代碼壓縮；
打開webpack.dev.conf.js能夠找到下面這段代碼：

    // 定義全局變量process.env
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),

    // dev.env.js
    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      BASE_URL: '"http://localhost:9000/api"',
    })

    // 項目中使用如index.js
    console.log(process.env.NODE_ENV); // 輸出development
    console.log(process.env.BASE_URL); // 輸出http://localhost:9000/api

爲此，咱們若有須要增長其它環境配置，只需copy一份webpack.dev.conf.js，如更名爲webpack.local.conf.js，按上面的介紹修改對應的全局變量便可。

2. 修改配置文件package.json

{
    "name": "vux-demo",
    "version": "1.0.0",
    "description": "A Vue.js project",
    "author": "vipinchan <chenweiping@xiamenair.com>",
    "private": true,
    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "local": "webpack-dev-server --inline --progress --config build/webpack.local.conf.js",
        "build": "node build/build.js"
    },
    "dependencies": {
        "axios": "^0.16.2",
        "fastclick": "^1.0.6",
        "jsonp": "^0.2.1",
        "superagent": "^3.5.2",
        "superagent-jsonp": "^0.1.1",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1",
        "vue-scroll-behavior": "^0.1.6",
        "vuex": "^2.1.1",
        "vuex-i18n": "^1.3.1",
        "vux": "^2.2.0",
        "mockjs": "1.0.1-beta3"
    },
    "devDependencies": {
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        "babel-eslint": "^7.1.1",
        "babel-loader": "^7.1.1",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "chalk": "^2.0.1",
        "compression-webpack-plugin": "^0.3.2",
        "connect-history-api-fallback": "^1.3.0",
        "copy-webpack-plugin": "^4.0.1",
        "css-loader": "^0.28.0",
        "eslint": "^3.19.0",
        "eslint-friendly-formatter": "^3.0.0",
        "eslint-loader": "^1.7.1",
        "eslint-plugin-html": "^3.0.0",
        "eslint-config-standard": "^10.2.1",
        "eslint-plugin-promise": "^3.4.0",
        "eslint-plugin-standard": "^3.0.1",
        "eslint-plugin-import": "^2.7.0",
        "eslint-plugin-node": "^5.2.0",
        "eventsource-polyfill": "^0.9.6",
        "extract-text-webpack-plugin": "^3.0.0",
        "file-loader": "^1.1.4",
        "friendly-errors-webpack-plugin": "^1.6.1",
        "html-webpack-plugin": "^2.30.1",
        "webpack-bundle-analyzer": "^2.9.0",
        "node-notifier": "^5.1.2",
        "postcss-import": "^11.0.0",
        "postcss-loader": "^2.0.8",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "optimize-css-assets-webpack-plugin": "^3.2.0",
        "ora": "^1.2.0",
        "rimraf": "^2.6.0",
        "url-loader": "^0.5.8",
        "yaml-loader": "^0.4.0",
        "less": "^2.7.1",
        "less-loader": "^2.2.3",
        "postcss": "^5.2.10",
        "postcss-less": "^0.15.0",
        "vux-loader": "^1.0.56",
        "vue-loader": "^13.3.0",
        "webpack-dev-middleware": "^1.10.0",
        "webpack-hot-middleware": "^2.16.1",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "portfinder": "^1.0.13",
        "webpack": "^3.6.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.0",
        "object-assign": "^4.1.0"
    },
    "engines": {
        "node": ">= 4.0.0",
        "npm": ">= 3.0.0"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
    ]
}

package.json是npm的配置文件，其中定義了項目基本信息、項目依賴庫以及最重要的node運行腳本，可經過webpack --config指令指定加載配置文件，運行腳本定義區看第七行代碼：

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "local": "webpack-dev-server --inline --progress --config build/webpack.local.conf.js",
    "build": "node build/build.js"
  },

npm run dev運行webpack-dev-server，並指定配置文件webpack.dev.conf.js。
npm run local運行webpack-dev-server，並指定配置文件webpack.local.conf.js。
npm run build使用node執行build/build.js。

如此即可靈活實現項目的多環境配置，一鍵切換開發環境、測試環境和生產環境，方便本地開發調試、部署。

3. 學習webpack-dev-server經常使用命令

webpack-dev-server是一個小型的Node.js Express服務器，它使用webpack-dev-middleware來服務於webpack的包，除此自外，它還有一個經過Sock.js來鏈接到服務器的微型運行時。

--watch 監聽文件的變化
--content-base build/  默認會以當前目錄爲基本目錄,除非你制定它
--quiet 控制檯中不輸出打包的信息
--progress 顯示打包的進度
--hot 模塊熱替換，在前端代碼變更的時候無需整個刷新頁面，只把變化的部分替換掉
--inline  inline模式
--port 3000 指定端口
--host  指定host，默認爲losthost，固然指定此項大多數狀況下是爲了這個服務能夠被外部服務訪問，這種狀況之下，你最好應該確保你的服務運行在DNS解析的域名IP一致
--compress 對全部服務啓用gzip壓縮
--config configs/webpack.vipinchan.conf.js 加載指定配置文件

官方文檔：https://webpack.js.org/configuration/dev-server