1、項目打包完運行空白
引用資源路徑問題，打包完的【index.html】文件引用其他文件的引用地址不對
參考配置：https://cli.vuejs.org/zh/config
修改vue.config.js ，根據與 后端 或 運維 溝通修改
module.export = {// 默認 publicPath: '/'// 打包自測階段可改為 './'，實際值根據 后端或運維 溝通決定publicPath: './'
}
2、路由
路由模式： hash 、 history
- hash：地址攜帶
#，正常打包可訪問，前端測試開發階段使用 - history：地址欄會改變，可以使用瀏覽器的【返回】按鈕，需要服務器端的支持，需要【后端或運維】做相關配置，做一下路徑重定向問題
路由懶加載
export const Routes = [{path: '/xxx',component: Xxxx,children: [{// 懶加載寫法component: () => import('@/xxx/xxx')}]},...
]
3、環境變量
參考文檔：https://cli.vuejs.org/zh/guide/mode-and-env.html
根目錄下新建【.env.development】【.env.production】【.env.test】，生產、開發、測試環境
- 【NODE_ENV】，【BASE_URL 】是默認的環境變量可訪問無法被修改，【NODE_ENV】代表當前的環境模式，【BASE_URL】代表的是當前根路徑
- 自定義環境變量規則：必須以【VUE_APP_】 開頭 否則無效
- 訪問方式：在開發中通過 【process.env.變量名稱】的方式獲取變量值
# 開發環境配置
NODE_ENV = 'development'# 頁面標題
VUE_APP_TITLE = 'xxx'# 開發環境
VUE_APP_BASE_API = '/dev-api'# 路由懶加載
VUE_CLI_BABEL_TRANSPILE_MODULES = true
根據不同環境做相應的配置
4、安裝可視化插件
npm install webpack-bundle-analyzer
const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {// 寫法一configureWebpack: {plugins: [new BundleAnalyzer()]}// 寫法二configureWebpack:config=>{config.plugins.push(new BundleAnalyzer())}
}
5、配置 vue.config.js
module.exports = {// 1、生產模式下打包不生成map映射文件（調試代碼時顯示代碼錯誤行數，文件很大）productionSourceMap: false,// 2、拆分app.js文件，路由寫成懶加載模式，頁面js會從app.js拆分出去// 2.1、代碼總體體積變大，但加載速度提升// 3、拆分vendors.js，依賴文件（vue、vue-router、vueX、element-ui等）// 3.1、ui組件按需引入，自動化引入// 4、代碼壓縮、圖片壓縮// 5、cdn// 6、根據文件大小類型選擇進一步優化
}
參考視頻地址：https://www.bilibili.com/video/BV1wt421p7yM
