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)打開
base: "./ ", //生產(chǎn)環(huán)境路徑
proxy: { // 本地開發(fā)環(huán)境通過代理實(shí)現(xiàn)跨域，生產(chǎn)環(huán)境使用 nginx 轉(zhuǎn)發(fā)
// 正則表達(dá)式寫法
'/m.api': {
target: 'http://192.168.1.188:8080', // 后端服務(wù)實(shí)際地址
changeOrigin: true, //開啟代理
}
}
},
})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í)遇到的一些問題
（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）控制臺(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.常見文件上傳的方式
（1）8UFTP，文件傳輸工具
（2）寶塔，服務(wù)器管理工具（常用、方便、重點(diǎn)）
3.使用寶塔上線操作過程
（1）寶塔是以網(wǎng)頁的方式提供，所以你需要獲取以下信息（公司提供）
網(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)目上線后遇到的一些問題
（1）刷新頁面后跳到404錯(cuò)誤頁面
產(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è)置中配置文件里"禁止訪問的文件或目錄"的位置添加一下代碼
location / {//解決刷新404問題
try_files $uri $uri/ /index.html;
}
location /m.api {//解決跨域問題
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)文章
Vue實(shí)戰(zhàn)之vue登錄驗(yàn)證的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue實(shí)戰(zhàn)之vue登錄的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
vue實(shí)現(xiàn)用v-bind給src和href賦值
這篇文章主要介紹了vue實(shí)現(xiàn)用v-bind給src和href賦值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了Vue組件開發(fā)初探，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
vue項(xiàng)目中使用mapbox地圖切換底圖的詳細(xì)教程
最近開始入坑前端mapbox地圖,跟大家一起慢慢深入學(xué)習(xí),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用mapbox地圖切換底圖的詳細(xì)教程,文中給出了詳細(xì)的實(shí)例代碼,需要的朋友可以參考下2023-04-04
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。這篇文章整理了vue中的常用知識(shí)點(diǎn)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue 使用typescript如何優(yōu)雅的調(diào)用swagger API
這篇文章主要介紹了Vue 使用typescript如何優(yōu)雅的調(diào)用swagger API,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了Vue組件生命周期運(yùn)行原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了vue3中的props組件抽離，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)
日常業(yè)務(wù)中路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01