一、編譯打包多出 *.map 文件處理
當執行 npm run build 后根目錄下會編譯出一個 dist 的文件夾，如下：
其中 css 和 js 文件夾下會多出一些 *.map 的文件，這些是沒用的，如何在編譯過程中進行排除？
修改，根目錄 --> config --> index.js 找到
# 將以下配置改為 false { cssSourceMap:true, productionSourceMap:true }
二、IE 頁面空白問題，並且報錯
[object Error] {description:"“Promise”未定義",message:"“Promise”未定義",name:"ReferenceError",number:-2146823279,stack:"ReferenceError"}
主要是 IE 對 ES6 的 Promise 支持不好，解決如下：
# 安裝 babel-polyfill npm install --save-dev babel-polyfill # 在 App.vue 文件中引用 import "babel-polyfill"; # 在 build --> webpack.base.js 中使用 # 修改 entry{ app:'./src/main.js' } # 為 entry{ app:['babel-polyfill','./src/main.js'] }
Promise 資料：
三、IE 下路由警告
在 IE 下運行時，控制台會打印出一段路由警告：
[vue-router] Named Route 'shared' has a default child route. When navigating to this named route (:to="{name: 'shared'"), the default child route will not be rendered. Remove the name from this Route and use the name of the default child route for named links instead.
在 vue 項目中使用了 Vue-Router ，當某個路由有子路由時，寫法如下：
如果是如上寫法，就會報出警告。
解決辦法：因為當某個路由有子路由時，這時候父級路由需要一個默認的路由，所有父級路由不能定義 name 屬性，即把父級路由的 name 屬性刪除即可。
相關資料：
四、jQuery 的引用
# 安裝 JQuery npm install --save-dev JQuery # 在根目錄 build --> webpack.base.js var webpack=require('webpack') module.exports={ plugins:[ new webpack.ProvidePlugin({ "$":"jquery", "jquery":"jquery", "windiw.jQuery":"jquery", "jQuery":"jquery" }) ] }
五、路由的引用
路由優化，按需加載組件，使用 webpack require.ensure
使用 vue-cli 構建的項目，在默認情況下，執行 npm run build 會將所有的 js 代碼打包為一個整體。
打包位置 dist/static/js/app.[contenthash].js。
類似下面的路由代碼：
# router/index.js 路由相關信息，該路由文件引入了多個 *.vue 組件
import Hello from "@/components/Hello"; import Province from "@/components/Province"; import Segment from "@/components/Segment"; import User from "@/components/User"; import Loading from "@/components/Loading";
執行 npm run build 會打包為一個整體 app.[contenthash].js，這個文件是非常大，可能幾兆或者幾十兆，加載會很慢
所以我們需要分模塊打包,把我們想要組合在一起的組件打包到一個 chunk 塊中去。
分模塊打包需要下面這樣使用 webpack的 require.ensure,並且在最后加入一個 chunk 名。
相同 chunk 名字的模塊將會打包到一起。
如下代碼：
# router/index.js 修改為懶加載組件
const login = r => require.ensure([], () => r(require('./components/login/login')), 'login'); const shared = r => require.ensure([], () => r(require('./components/shared/shared')), 'shared'); const home = r => require.ensure([], () => r(require('./components/home')), 'home'); const modal = r => require.ensure([], () => r(require('./ui/modal')), 'modal'); const icons = r => require.ensure([], () => r(require('./ui/icons')), 'icons'); const buttons = r => require.ensure([], () => r(require('./ui/buttons')), 'buttons');
根據 chunkame 的不同, 上面的四個組件, 將會被分成3個塊打包,最終打包之后與組件相關的js文件會分為3個 (除了app.js,manifest.js, vendor.js)。
分模塊打包之后在 dist 目錄下是這樣的, 這樣就把一個大的 js 文件分為一個個小的 js 文件了,按需去下載,其他的使用方法和 import 的效果一樣。
相關資料：
六、vue-cli 腳手架的 .babelrc 文件詳解
es6 特性瀏覽器還沒有全部支持，但是使用 es6 是大勢所趨，所以 babel 應運而生，用來將 es6 代碼轉換成瀏覽器能夠識別的代碼
babel 有提供專門的命令工具方便轉碼
{ // 此項指明，轉碼的規則
"presets": [ // env項是借助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉碼，並且設置amd,commonjs這樣的模塊化文件，不進行轉碼
["env", { "modules": false }], // 下面這個是不同階段出現的es語法，包含不同的轉碼插件
"stage-2" ], // 下面這個選項是引用插件來處理代碼的轉換，transform-runtime用來處理全局函數和優化babel編譯
"plugins": ["transform-runtime"], // 下面指的是在生成的文件中，不產生注釋
"comments": false, // 下面這段是在特定的環境中所執行的轉碼規則，當環境變量是下面的test就會覆蓋上面的設置
"env": { // test 是提前設置的環境變量，如果沒有設置BABEL_ENV則使用NODE_ENV，如果都沒有設置默認就是development
"test": { "presets": ["env", "stage-2"], // instanbul是一個用來測試轉碼后代碼的工具
"plugins": ["istanbul"] } } }