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