一、專案優化
1.去掉列印console
-
需求：在開發環境中，保留列印console；在生產上線環境，自動去掉列印console
-
使用步驟：
-
第一步：在專案根目錄下，創建如下圖兩個組態檔
在.env.development中(開發環境變數)
NODE_ENV=development在.env.production中(生產上線環境變數)
NODE_ENV=production -
第二步：在main.js中添加配置
if (process.env.NODE_ENV !== 'development') { // process是Node環境全部變數, 運行時根據敲擊的命令不同, 腳手架會取環境變數給env添加屬性和值 console.log = function () {} console.error = function () {} console.dir = function () {} }
-
2.解決依賴包大的問題
- 默認情況下，通過import語法匯入的第三方依賴包，最侄訓被打包合并到同一個檔案中，從而導致打包成功后，單檔案體積過大的問題，
- 解決方案：通過externals加載外部CDN資源，凡是宣告在externals中的第三方依賴包，都不會被打包，
- 在public/index.html檔案的頭部，添加對應的CDN資源參考，
二、專案打包
1.專案配置
-
詳見：webpack中文網
-
在專案根目錄下，創建vue.config.js檔案
module.exports = { // 打包后的基本路徑 publicPath: './' }
三、專案部署
1.本地服務器
-
通過node創建web服務器
-
并開啟gzip配置，以減少檔案體積，使傳輸速度更快
-
npm install compression -D
// 創建node專案，并安裝express，通過express快速創建web服務器，將vue打包生產的dist檔案夾，托管為靜態資源，并開啟gzip配置，以減少檔案體積，使傳輸速度更快 const express = require('express') const compression = require('compression') // 創建web服務器 const app = express() // 啟用中間件 app.use(compression()) // 托管靜態資源 app.use(express.static('./dist')) // 啟動web服務器 app.listen(80, () => { console.log('服務器已成功啟動') }) -
2.遠程服務器
鏈接：https://pan.baidu.com/s/1B0l6WNWt1goOxE_zYY3Fdg?pwd=0i9b
提取碼：0i9b
--來自百度網盤超級會員V4的分享
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509816.html
標籤：其他
下一篇：mapboxgl加載tiff