VUE項目多環境配置.md
目錄
- 一、了解webpack.DefinePlugin
- 二、項目中如何配置多環境
web項目開發，通常需要有開發環境、測試環境和生產環境，用於配置不同的環境變更，如調用本地接口、測試接口和生產接口，VUE項目是前後端完全分離的框架，像是web界的C/S構架，在做VUE前端開發時，就需要用開發環境甚至於mock環境，等項目上線時，則需要使用生產的環境變量進行打包部署。
一、了解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/
二、項目中如何配置多環境
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 <[email protected]>",
"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
VUE項目多環境配置.md