文章目錄

• • vue項(xiàng)目打包與配置-學(xué)習(xí)筆記
  • 前端打包
  • 打包的代碼如何運(yùn)行
  • 打包指定不同的環(huán)境變量(開(kāi)發(fā)，測(cè)試)
  • 打包手動(dòng)配置文件
  • 打包壓縮，大文件處理
  • gzip進(jìn)一步壓縮
  • 打包app
  • 打包部署模式

vue項(xiàng)目打包與配置-學(xué)習(xí)筆記

前端打包

• npm run build
  – package.json -- vue-cli-service build
  – 發(fā)布到線(xiàn)上的代碼，不便于調(diào)試
• 打包發(fā)布到測(cè)試環(huán)境
  –增加打包命令 開(kāi)發(fā)(后端地址) 測(cè)試(后端地址) 線(xiàn)上(后端地址)
  –npm run build:dev --開(kāi)發(fā)調(diào)試環(huán)境
  –npm run build:prod --線(xiàn)上
  

打包的代碼如何運(yùn)行

• 不能雙擊dist/index.html
• 放到http容器運(yùn)行 serve tomcat nginx iis
• npm i -g serve
• 啟動(dòng)打包后的目錄 serve dist 訪(fǎng)問(wèn)：http://localhost:5000

打包指定不同的環(huán)境變量(開(kāi)發(fā)，測(cè)試)

–npm run build:prod跟npm run build的區(qū)別是不是有沒(méi)有壓縮的區(qū)別？

• 添加環(huán)境變量
  開(kāi)發(fā) 在根目錄添加.env.dev dev名稱(chēng)與package.json中的mode對(duì)應(yīng)

## 開(kāi)發(fā)環(huán)境 鍵值對(duì) NODE_ENV=development ## 變量以VUE_APP_開(kāi)頭 VUE_APP_URL=http://139.196.42.209:5004/api/

線(xiàn)上 在根目錄添加.env.prod

## 線(xiàn)上環(huán)境 NODE_ENV=production VUE_APP_URL=http://www.production.com

使用環(huán)境變量(process.env.NODE_ENV）

打包手動(dòng)配置文件

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

打包壓縮，大文件處理

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

gzip進(jìn)一步壓縮

• compression-webpack-plugin
• 配置vue.config.js
• 打包會(huì)生成以gz結(jié)尾的文件
• 如何看瀏覽是使用gzip
  瀏覽器控制臺(tái) 點(diǎn)開(kāi)相關(guān)js文件
  請(qǐng)求頭 Accept-Encoding: gzip, deflate, br
  響應(yīng)頭 Content-Encoding: gzip
  性能最大化

打包app

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

打包部署模式

• hash 打包后dist直接使用http容器運(yùn)行 本地級(jí)線(xiàn)上相同
  路由中有#
  可以刷新頁(yè)面
• history 打包后通過(guò)http容器運(yùn)行刷新會(huì)有404
  路由中沒(méi)#
  不可以刷新頁(yè)面
  解決：需要將前端與后端一起部署，由后端負(fù)責(zé)跳轉(zhuǎn)前端(在講nodejs說(shuō)明)
  可腳手架里可以刷新頁(yè)面
  
  vue.config.js文件：

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。