当你设法做了一个Vue项目，当你准备上线的时候，你发现你不知道该做什么，或者遇到了一些问题，所以读读我的文章，你会有所收获。

1.包装

项目上线时必须打包。

命令：npm运行构建

打包后，会生成一个dist文件夹，其中包含index.html文件和静态文件夹

打包命令的截图如下：

生成的文件如下：

既然我们已经打包好了，现在就开始这个项目吧。

双击index.html打开

你会看到很多错误。你害怕吗？别担心。继续找。从上图中我们可以看出，错误是由错误的资源路径引起的，所以我们需要修改一些文件。

在这里，将资源的路径从“/”更改为。/“因为”。/'表示在当前目录下。

没用的。以前index.html的进口文件是这样的：

它找不到这个路径，所以报告了一个错误。

变化之后，是这样的：

此时，路径是正确的，然后双击打开它

此时没有错误，正常打开。

2.启动项目。(运行index.html)

您可以双击打开它，也可以在任意位置启动带有节点的静态文件服务器。在npm官网搜索找到，然后安装。

Cd到我们的dist文件夹，然后就可以开始了。

然后我们的打包工作就完成了，我们可以把整个dist文件交给后端，或者把它们放在网上进行操作和维护。

3.解决一些错误

第一：静态资源路径错误的问题

当我在vue css中写一张背景图片时，它在npm运行构建后并没有很好地工作。

截图如下：如您所见，当npm运行dev时，它是好的

但是当我打包它并从任何地方开始时，

但它报告了一个错误。它告诉我，资源的道路是错误的。仔细一看，我没有这个路径，我的项目也没有随便更改配置。要不要再拍拍额头？别急，跟我换配置。

打开我们的构建文件夹，找到里面的utils.js文件，找到第51行(视觉检查是肯定的)，添加这段代码public path :’././'，然后重新打包，那么资源路径就是正确的。

更改如下：

效果如下：

让我们用review元素来看一下：这一次，它正确地找到了资源的路径并加载了它们。

写错了：

现在你知道如何解决这个问题了。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。