【打包vue前端项目】

文章目录

• 前言
• 一、打包命令
• 二、重新打包
• 三、打包不成功
• • • 可能存在问题：
    • 解决方案：
• 四、其他问题

前言

实例项目是使用vue3+vite

一、打包命令

默认的打包命令一般为

npm run build

但是还有其他命令如npm run build:prod
npm run build 是一个用于构建项目的 npm 命令。它用于将项目中的源代码转换为生产环境中所需的代码，通常包括压缩代码、优化资源、处理依赖等步骤。
npm run build:prod 是 npm run build 的一个变体，其中 prod 代表生产环境。这意味着该命令会执行与 npm run build 相同的任务，但会针对生产环境进行特定的优化和设置。
在一些构建工具中，如 Vue CLI 和 Create React App，npm run build 和 npm run build:prod 是等效的命令，都用于构建生产环境代码。但在其他情况下，这两个命令可能有不同的用途和配置，需要具体根据项目的需要进行设置。

但是不能盲目使用命令，需要确定你的项目命令，可以查看package.json中的script里面的命令行

我的里面没有build:prod 所以不能运行npm run build:prod命令，如果需要，需要自行添加

二、重新打包

假如打包完之后需要重新在打包，（默认生成路径是在项目下生成一个文件夹dist,也可以在build中修改生成的文件夹名字），删除生成的文件夹如dist,再次运行打包命令即可。

三、打包不成功

即运行不了效果

可能存在问题：

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

解决方案：

• 修改公共路径
  
  修改公共路径为这样，运行的图片文件等其他路径打包时将变为相对路径，便不会报错

• 修改路由模式
  这个是看见其他网友出现的问题，模式为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 *;`,
      },
    },
  }  
})

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