文章目錄

• • vue項目打包與配置-學習筆記
  • 前端打包
  • 打包的代碼如何運行
  • 打包指定不同的環境變量(開發，測試)
  • 打包手動配置文件
  • 打包壓縮，大文件處理
  • gzip進一步壓縮
  • 打包app
  • 打包部署模式

vue項目打包與配置-學習筆記

前端打包

• npm run build
  – package.json -- vue-cli-service build
  – 發布到線上的代碼，不便于調試
• 打包發布到測試環境
  –增加打包命令 開發(后端地址) 測試(后端地址) 線上(后端地址)
  –npm run build:dev --開發調試環境
  –npm run build:prod --線上
  

打包的代碼如何運行

• 不能雙擊dist/index.html
• 放到http容器運行 serve tomcat nginx iis
• npm i -g serve
• 啟動打包后的目錄 serve dist 訪問：http://localhost:5000

打包指定不同的環境變量(開發，測試)

–npm run build:prod跟npm run build的區別是不是有沒有壓縮的區別？

• 添加環境變量
  開發 在根目錄添加.env.dev dev名稱與package.json中的mode對應

## 開發環境 鍵值對 NODE_ENV=development ## 變量以VUE_APP_開頭 VUE_APP_URL=http://139.196.42.209:5004/api/

線上 在根目錄添加.env.prod

## 線上環境 NODE_ENV=production VUE_APP_URL=http://www.production.com

使用環境變量(process.env.NODE_ENV）

打包手動配置文件

• vuecli4.x腳手架基于webpack
• vuecli零配置， 不需要零配置可以指定vue.config.js（項目根目錄）
• 指定子域配置 publicPath
  如需要在http://www.baidu.com下加一個子域http://www.baidu.com/map
  則需要配置publicPath:’/map/’
  注意：打包后需要在dist中加一層目錄map，把所有文件移入map目錄 啟動serve dist

打包壓縮，大文件處理

• 開發npm run build:dev 7.11mb
• 線上npm run build:prod 1.8mb
• 少了哪些文件？ 注釋， 空行， 壓縮， 混淆
• 大文件 900k
• 代碼細分：三方vue,axios,elementui; 開發代碼
• 把三方的代碼移除去, 使用三方提供的cdn資源(免費 收費)
• 找三方包cdn資源， 添加到public/index.html, 把代碼中的from vue, vue.use()
  // import Vue from ‘vue’
  // Vue.use(ElementUI)
  在vue.config.js配置排除三方包
• 通過減少三方包vue 打包后的js 1.74mb

gzip進一步壓縮

• compression-webpack-plugin
• 配置vue.config.js
• 打包會生成以gz結尾的文件
• 如何看瀏覽是使用gzip
  瀏覽器控制臺 點開相關js文件
  請求頭 Accept-Encoding: gzip, deflate, br
  響應頭 Content-Encoding: gzip
  性能最大化

打包app

• android ios
• h5運行環境(五大瀏覽器， 瀏覽器內核(android ios), 小程序)
• 打包工具hbuildx
  創建一個app項目, 把dist目錄文件復制到app目錄下
  打開manifest.json, 獲取唯一的id
  發行—原生app-云打包–選擇android–使用Dcloud老版本證書–打包
  初次打包需要DCloud賬號密碼
• 打包成功后可以下載
• mumu模擬器運行apk文件
  模擬器右下角—添加apk
• 打包后的dist可以發布到服務器上 也可以打包成app

打包部署模式

• hash 打包后dist直接使用http容器運行 本地級線上相同
  路由中有#
  可以刷新頁面
• history 打包后通過http容器運行刷新會有404
  路由中沒#
  不可以刷新頁面
  解決：需要將前端與后端一起部署，由后端負責跳轉前端(在講nodejs說明)
  可腳手架里可以刷新頁面
  
  vue.config.js文件：

let CompressionWebpackPlugin = require("compression-webpack-plugin")module.exports = {// 打包文件訪問的相對目錄 獨立項目 通過項目根目錄訪問// publicPath: './', // http://localhost:5000// 打包到子域下面 http://www.baidu.com/mappublicPath: '/map/', //需要在dist中加一層目錄map，把所有文件移入map目錄 啟動serve dist//開發需要map 線上不需要 map--提供代碼映射 方便于在瀏覽器控制臺調試productionSourceMap: process.env.NODE_ENV==='production' ? false : true,//配置webpackconfigureWebpack: config=>{let plugins = [new CompressionWebpackPlugin({algorithm: 'gzip', //壓縮方式test: /\.js$|\.css$/, //匹配壓縮文件threshold: 10240 //對大于10k壓縮})]if (process.env.NODE_ENV === 'production') {config.mode = "production"// config.plugins --vuecli默認提供很多插件config.plugins = [...config.plugins, ...plugins]}else{config.mode = "development"}//config----vuecli默認配置Object.assign(config, { //object.assign 把右邊的復制到左邊對象中externals: { //打包排除的依賴包vue: 'Vue', //去除vue依賴包// axios: 'axios',// element: 'element-ui'}})} }

總結

以上是生活随笔為你收集整理的vue项目打包与配置-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。