vue3項(xiàng)目打包與上線詳細(xì)圖文教程
一、vue3項(xiàng)目打包
1.去掉項(xiàng)目中console.log和debugger
在vite.config.ts文件中添加esbuild:{drop:["console","debugger"]}
export default defineConfig({
esbuild:{//打包時(shí)去除console和debugger代碼
drop:["console","debugger"]
},
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}), vue(), vueJsx(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
port: 3000,
open: false, //自動(dòng)打開(kāi)
base: "./ ", //生產(chǎn)環(huán)境路徑
proxy: { // 本地開(kāi)發(fā)環(huán)境通過(guò)代理實(shí)現(xiàn)跨域，生產(chǎn)環(huán)境使用 nginx 轉(zhuǎn)發(fā)
// 正則表達(dá)式寫(xiě)法
'/m.api': {
target: 'http://192.168.1.188:8080', // 后端服務(wù)實(shí)際地址
changeOrigin: true, //開(kāi)啟代理
}
}
},
})2.去掉ts類型檢測(cè)
在package.json文件中scripts對(duì)象中
"build": "run-p type-check build-only"改為"build": "run-p build-only"
3.打包
npm run build
4.預(yù)覽打包后的項(xiàng)目
npm run preview
5.預(yù)覽時(shí)遇到的一些問(wèn)題
（1）echarts首次渲染沒(méi)問(wèn)題，第二次渲染卻成空白
產(chǎn)生原因：echarts插件自帶的bug
解決方法
onBeforeUnmount(() => {//防止echarts帶來(lái)的空白bug
if (column) {
column.dispose()
column = undefined
}
if (line) {
line.dispose()
line = undefined
}
if (pie) {
pie.dispose()
pie = undefined
}
if (pies) {
pies.dispose()
pies = undefined
}
})（2）控制臺(tái)輸出404
產(chǎn)生原因：未找到圖標(biāo)文件，路徑錯(cuò)誤
解決方法：在入口index.html文件中路徑中的"."去掉
<link rel="icon" href="./favicon.ico" rel="external nofollow" > 改為 <link rel="icon" href="/favicon.ico" rel="external nofollow" > <link rel="stylesheet" href="./public/iconfont/iconfont.css" rel="external nofollow" > 改為 <link rel="stylesheet" href="/public/iconfont/iconfont.css" rel="external nofollow" >
二、項(xiàng)目上線
1.上線，將打包好的文件上傳到服務(wù)器
服務(wù)器分為：外網(wǎng)服務(wù)器和內(nèi)網(wǎng)服務(wù)器
2.常見(jiàn)文件上傳的方式
（1）8UFTP，文件傳輸工具
（2）寶塔，服務(wù)器管理工具（常用、方便、重點(diǎn)）
3.使用寶塔上線操作過(guò)程
（1）寶塔是以網(wǎng)頁(yè)的方式提供，所以你需要獲取以下信息（公司提供）
網(wǎng)站：例如：http://zxwyit.cn:8888/3XelX3u9
用戶名和密碼：例如admin 10086
（2）在寶塔內(nèi)創(chuàng)建站點(diǎn)
（3）上傳打包好的文件到站點(diǎn)
（4）測(cè)試上線后的項(xiàng)目
4.項(xiàng)目上線后遇到的一些問(wèn)題
（1）刷新頁(yè)面后跳到404錯(cuò)誤頁(yè)面
產(chǎn)生原因：自帶的bug
解決方法1：將路由模式改為hash模式，在router文件夾下的index.ts
history: createWebHistory(import.meta.env.BASE_URL) 改為 history: createWebHashHistory(import.meta.env.BASE_URL)
解決方法2：不改變路由模式，修改服務(wù)器配置文件，
具體參考vue-router官方文檔v4.x版本中的不同的歷史模式中的服務(wù)器配置示例
示例：這里以nginx類型的服務(wù)器為例
在寶塔中站點(diǎn)設(shè)置中配置文件里"禁止訪問(wèn)的文件或目錄"的位置添加一下代碼
location / {//解決刷新404問(wèn)題
try_files $uri $uri/ /index.html;
}
location /m.api {//解決跨域問(wèn)題
proxy_pass http://192.168.1.188:8080(跨域代理)
}
總結(jié)
到此這篇關(guān)于vue3項(xiàng)目打包與上線的文章就介紹到這了,更多相關(guān)vue3項(xiàng)目打包上線內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vueJs函數(shù)toRaw?markRaw使用對(duì)比詳解
這篇文章主要為大家介紹了vueJs函數(shù)toRaw?markRaw使用對(duì)比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
從接觸Vue我們就知道 v-model是實(shí)現(xiàn)數(shù)據(jù)雙向綁定的那他能實(shí)現(xiàn)綁定的原理到底是啥？最常見(jiàn)的語(yǔ)法糖 v-model，今天通過(guò)案例給大家詳細(xì)介紹下，需要的朋友參考下吧2021-09-09
vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實(shí)例
下面小編就為大家分享一篇vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
前端element-ui兩層dialog嵌套遮罩層消失的問(wèn)題解決辦法
最近使用vue+elementUI做項(xiàng)目,使用過(guò)程中很多地方會(huì)用到dialog這個(gè)組件,有好幾個(gè)地方用到了dialog的嵌套,這篇文章主要給大家介紹了關(guān)于前端element-ui兩層dialog嵌套遮罩層消失的問(wèn)題解決辦法,需要的朋友可以參考下2024-08-08
Vue源碼學(xué)習(xí)記錄之手寫(xiě)vm.$mount方法
在我們開(kāi)發(fā)中，經(jīng)常要用到Vue.extend創(chuàng)建出Vue的子類來(lái)構(gòu)造函數(shù)，通過(guò)new 得到子類的實(shí)例，然后通過(guò)$mount掛載到節(jié)點(diǎn)，今天通過(guò)本文給大家講解手寫(xiě)vm.$mount方法 ，感興趣的朋友一起看看吧2022-11-11
vue實(shí)現(xiàn)條件判斷動(dòng)態(tài)綁定樣式的方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)條件判斷動(dòng)態(tài)綁定樣式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了websocket在vue2中的封裝使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue?路由傳參加密,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
Vue中使用 Echarts5.0 遇到的一些問(wèn)題(vue-cli 下開(kāi)發(fā))
這篇文章主要介紹了Vue中使用 Echarts5.0 遇到的一些問(wèn)題(vue-cli 下開(kāi)發(fā))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3使用sessionStorage保存會(huì)話數(shù)據(jù)的實(shí)現(xiàn)方式
在前端開(kāi)發(fā)中,我們常常需要在用戶會(huì)話期間保存一些數(shù)據(jù),這些數(shù)據(jù)在頁(yè)面刷新或?qū)Ш綍r(shí)依然需要存在,sessionStorage 是一種非常方便的方式來(lái)實(shí)現(xiàn)這一點(diǎn),在這篇文章中,我們將探討如何在Vue3應(yīng)用中使用sessionStorage來(lái)保存會(huì)話數(shù)據(jù),需要的朋友可以參考下2025-01-01