vue3项目打包与上线详细图文教程
作者：℘团子এ
这篇文章主要给大家介绍了关于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: "./ ", //生产环境路径
proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
// 正则表达式写法
'/m.api': {
target: 'http://192.168.1.188:8080', // 后端服务实际地址
changeOrigin: true, //开启代理
}
}
},
})2.去掉ts类型检测
在package.json文件中scripts对象中
"build": "run-p type-check build-only"改为"build": "run-p build-only"
3.打包
npm run build
4.预览打包后的项目
npm run preview
5.预览时遇到的一些问题
（1）echarts首次渲染没问题，第二次渲染却成空白
产生原因：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
产生原因：未找到图标文件，路径错误
解决方法：在入口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.上线，将打包好的文件上传到服务器
服务器分为：外网服务器和内网服务器
2.常见文件上传的方式
（1）8UFTP，文件传输工具
（2）宝塔，服务器管理工具（常用、方便、重点）
3.使用宝塔上线操作过程
（1）宝塔是以网页的方式提供，所以你需要获取以下信息（公司提供）
网站：例如：http://zxwyit.cn:8888/3XelX3u9
用户名和密码：例如admin 10086
（2）在宝塔内创建站点
（3）上传打包好的文件到站点
（4）测试上线后的项目
4.项目上线后遇到的一些问题
（1）刷新页面后跳到404错误页面
产生原因：自带的bug
解决方法1：将路由模式改为hash模式，在router文件夹下的index.ts
history: createWebHistory(import.meta.env.BASE_URL) 改为 history: createWebHashHistory(import.meta.env.BASE_URL)
解决方法2：不改变路由模式，修改服务器配置文件，
具体参考vue-router官方文档v4.x版本中的不同的历史模式中的服务器配置示例
示例：这里以nginx类型的服务器为例
在宝塔中站点设置中配置文件里"禁止访问的文件或目录"的位置添加一下代码
location / {//解决刷新404问题
try_files $uri $uri/ /index.html;
}
location /m.api {//解决跨域问题
proxy_pass http://192.168.1.188:8080(跨域代理)
}
总结
到此这篇关于vue3项目打包与上线的文章就介绍到这了,更多相关vue3项目打包上线内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！