【打包vue前端项目】

大家好，欢迎来到IT知识分享网。

前言

实例项目是使用vue3+vite

一、打包命令

默认的打包命令一般为

npm run build

二、重新打包

三、打包不成功

即运行不了效果

可能存在问题：

• 路径问题
• 路由模式问题
• 项目需要跨域，需要在服务器上运行

解决方案：

• 修改公共路径
  
  修改公共路径为这样，运行的图片文件等其他路径打包时将变为相对路径，便不会报错
  
  
• 修改路由模式
  这个是看见其他网友出现的问题，模式为history模式的需要改为hash模式
  
• 使用nginx代理运行项目（主要对于需要发送请求的，对于完全静态的可以本地运行)
  官网下载，安装，启动，浏览器输入主机+端口就可以运行项目
  

四、其他问题

1. 浏览器不支持问题
   
   该图表示打包之后的项目不支持运行在es2015版本
   解决方法
   找到vite.config.ts或vue.config.js文件中的build，将target改为支持的浏览器版本
   
   
   
   
   
   
   
   
2. scss编译警告
   
   查看其他答案是安装一个插件或者修改vite.config.ts/vue.config.js中配置
   
   

export default ({ mode }) => defineConfig({ css: { preprocessorOptions: { scss: { charset: false, additionalData: `@use "@/assets/styles/element/index.scss" as *;`, }, }, } }) 

也可以不管这个警告，不影响项目打包