當前位置：首頁 > 前端技术 > vue >内容正文

vue

基于Vue项目打包上线配置

發布時間：2023/12/13 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了基于Vue项目打包上线配置小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

打包上線

開發階段 : npm run serve
發布階段 : npm run build

build之前

1. 把基準地址, 由開發階段的換成發布階段的

//main.js axios.defaults.baseURL = 'http://localhost:3000'

2. 忽略項目中打印的結果

// main.js console.log = () => {}// 開發階段 => 注釋掉 => 讓后面的log 可以使用 // 發布階段 => 釋放注釋 => log重寫 => 后面的log 都不會打印

build

運行 npm run build
打一個包出來 : /dist文件夾
把 /dist文件夾交給后臺即可
- 我們可以自己嘗試 : live-server

npm i live-server -g

懶加載

為什么要進行懶加載 ?

性能優化 - 首屏加載速度

1. 把除了首屏的組件外其他組件都處理為異步組件, 交給webpack來進行分割 , 需要的時候才加載該模塊

//router/index.js import Home from '../pages/Home.vue' // home就是首屏不需要參與懶加載const Login = () => import(/* webpackChunkName: "user" */ '../pages/Login.vue') const Register = () =>import(/* webpackChunkName: "user" */ '../pages/Register.vue') const User = () => import(/* webpackChunkName: "user" */ '../pages/User.vue') const Edit = () => import(/* webpackChunkName: "user" */ '../pages/Edit.vue') const MyFollow = () =>import(/* webpackChunkName: "user" */ '../pages/MyFollow.vue') const MyComments = () =>import(/* webpackChunkName: "user" */ '../pages/MyComments.vue') const MyStar = () =>import(/* webpackChunkName: "user" */ '../pages/MyStar.vue') const Test = () => import(/* webpackChunkName: "home" */ '../pages/Test.vue') const Detail = () =>import(/* webpackChunkName: "home" */ '../pages/Detail.vue') const TabEdit = () =>import(/* webpackChunkName: "home" */ '../pages/TabEdit.vue') const Search = () =>import(/* webpackChunkName: "home" */ '../pages/Search.vue')

##2. 把組件按組分塊

有時候我們想把某個路由下的所有組件都打包在同個異步塊 (chunk) 中。只需要使用命名 chunk，一個特殊的注釋語法來提供 chunk name (需要 Webpack > 2.4)。

總結

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

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

上一篇： Vuex说明及Todos项目改造
下一篇： vuex的结构有哪些参数？