【前端】vue打包npm run build报错问题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

例如：随着人工智能的不断发展，越来越多的人开始学习前端语言，本文主要介绍了vue打包的过程及报错排查思路。

---

一、vue部署打包的过程

Vue.js 项目的打包通常使用 Vue CLI 中提供的打包工具。Vue CLI 是一个官方提供的标准工具，用于快速搭建 Vue.js 项目，提供了一套强大的命令行工具，包括项目初始化、开发调试、打包构建等功能。

以下是使用 Vue CLI 打包 Vue.js 项目的一般步骤：

1. 安装 Vue CLI

如果您还没有安装 Vue CLI，可以使用 npm 或 yarn 进行安装：

# 使用 npm 安装
npm install -g @vue/cli

# 或者使用 yarn 安装
yarn global add @vue/cli

2. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目：

vue create my-project

其中，my-project 是您的项目名称，您可以根据需要进行修改。

3. 开发和测试

进入到项目目录，启动开发服务器进行开发和调试：

cd my-project
npm run serve

4. 打包构建

当您的项目开发完成后，可以使用以下命令进行打包构建：

npm run build

或者如果您使用的是 yarn：

yarn build

这将会在项目根目录下生成一个 dist 目录，其中包含了打包后的静态文件，可以直接部署到服务器上。

5. 配置打包选项

如果您需要对打包过程进行一些自定义配置，可以编辑项目根目录下的 vue.config.js 文件，该文件允许您覆盖 Vue CLI 默认的打包配置。

6. 部署项目

将打包后的 dist 目录中的文件部署到您的服务器或托管平台上，即可将 Vue.js 项目部署到生产环境中。

通过以上步骤，您就可以使用 Vue CLI 将 Vue.js 项目打包为静态文件，并进行部署。

二、打包出现静态资源找不到文件问题

1.检查打包路径

./ 表示当前路径，/ 表示根目录，…/ 表示父级目录

2. js, css等其他静态文件路径不对

解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’

3. css中引用的图片资源找不到

打包后路径发生变化这个图片就找不到了，stackflow上有一个解决办法，很简单打开“build/utils.js”，在vue-style-loader下添加 publicPath: ‘…/…/’ 增加一行代码即可