vue-cli 第二章 （常見問題修正）

1、編譯打包多出 *.map 文件處理

 

當執行 npm run build 後根目錄下會編譯出一個 dist 的文件夾，以下：

 

 

其中 css 和 js  文件夾下會多出一些 *.map 的文件，這些是沒用的，如何在編譯過程當中進行排除？

 

修改，根目錄 --> config --> index.js 找到 

 

# 將如下配置改成 false { cssSourceMap:true, productionSourceMap:true }

 

2、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 資料：

https://babeljs.io/docs/usage/polyfill/

http://www.javashuo.com/article/p-hgwiljgc-ev.html

http://www.javashuo.com/article/p-adlztcbb-z.html

 

3、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 屬性刪除便可。

 

相關資料：

https://forum.vuejs.org/t/vue2-0-ie11/13491

 

4、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" }) ] }

 

5、路由的引用

 

路由優化，按需加載組件，使用 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 的效果同樣。

 

 

 

相關資料：

https://blog.csdn.net/yangbingbinga/article/details/61417689

https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

 

6、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"] } } }