vue專案優化技巧

（1）vue-cli-service build --report

（2）通過視覺化的ui面板直接檢視報告

如果有修改 webpack 預設配置的需求，可以在專案根目錄中，按需建立 vue.config.js 這個配置檔案，從而對專案的打包發布過程做自定義的配置

// vue.config.js 

// 這個檔案中，應該匯出乙個包含了自定義配置選項的物件
module.exports =

開發模式的入口檔案為 src/main-dev.js

發布模式的入口檔案為 src/main-prod.js

configurewebpack 和 chainwebpack 的作用相同，唯一的區別就是它們修改 webpack 配置的方式不同

chainwebpack **示例

module.exports =

) //開發模式
config.when(process.env.node_env === 'development', config =>)}
}

以下**配置在vue.config.js中的發布模式函式中

config.set('externals',

)

"stylesheet" href="" />

在 index.html 的頭部區域中，通過 cdn 載入 element-ui 的 js 和 css 樣式

"stylesheet" href="" />

chainwebpack: config =>)}

) config.when(process.env.node_env === 'development', config =>)}
)}

<%= htmlwebpackplugin.options.isprod ? '' : 'dev - ' %>電商後台管理系統
<% if(htmlwebpackplugin.options.isprod)
%>

在 babel.config.js 配置檔案中宣告該外掛程式

將路由改為按需載入的形式，示例**如下：

const foo = (

) => import
(/* webpackchunkname: "group-foo" */
'./foo.vue'
)const bar = (
) => import
(/* webpackchunkname: "group-foo" */
'./bar.vue'
)

import nprogress from 'nprogress'

import 'nprogress/nprogress.css'
// 在response***中隱藏進度條 nprogress.done()
)// 在request***中展示進度條 nprogress.start()
;axios.interceptors.request.use(config =>

module.exports =

vue高階實戰技巧 如何優化專案

require.context 批量require檔案 1 以業務為模組建立相應的模組目錄 mode1 模組資料夾 pages 模版資料夾 model1.index.vue 模版檔案 model1.second.vue 模版檔案 index.routes.js 此模組的路由檔案index.route...

vue專案優化

1.通過nprogress新增進度條效果 安裝執行依賴 匯入nprogress包對應的js和css import nprogress from nprogress import nprogress nprogress.css 在axios的request 中展示進度條 nprogress.start...

vue專案優化

專案優化 進度條新增 移除打包之後的console 只在發布階段移除console 利用vue.config.js修改webpack的預設配置 自定義入口檔案 通過cdn載入外部資源 配置element ui的cdn資源 根據不同環境定製不同的首頁內容 我們要在index.html中來判斷當前環境為...