本地使用Vue-cli配置包文件的教程图

最近，一个嵌入在app中的pc端项目使用了一个熟悉的vue-cli构建工具来构建该项目。需要的是打开dist文件夹入口html，并将其加载到本地静态文件中。打包的index.html加载文件如下：

据我们所知，url中的路径前面有一个反斜杠(/XX)，意思是从网站的根目录中搜索文件。如果需要相对于当前文件夹，则需要从。/或没有反斜杠。打包的文件路径似乎有问题

所以我去了webpack.base.conf.js文件，有一个输出选项。输出是WebPack中输出文件的配置。最常用的属性是文件名和路径，它们指定输出文件的名称和在项目中的位置。publicPath可以为项目中的所有资源指定一个基本路径，这也是解决这个问题的关键。

正式文件：网络包输出

如图所示：

可以看到publicPath属性中有一个三元运算。什么是process.env.NODE_ENV？

precess对象是一个全局变量，可以在应用程序(包括业务页面)中全局使用。process.env属性返回一个包含用户环境信息的对象。process.env.NODE_ENV用于定义环境变量，一般包括生产和开发。我们在webpack中的各种配置也是根据环境变量进行处理的。

由于生产环境中的文件是经过处理的，因此查找config.build对象是很自然的。这时，我来到config文件夹找到相关的配置

在index.js文件中输出两个对象(dev和build)，并将assetsPublicPath更改为“”。/'或生成对象中的空字符串。此时，执行打包命令npm run build，并在浏览器中打开dist下的index.html文件夹。

哈哈，文件已经加载了，但是css文件中引用的字体文件路径无法加载。现在我们来看看字体文件的路径

因为我使用了相对于当前文件夹的路径，所以此时的url相对于当前css文件所在的目录，dist文件夹结构如下：

我想到的解决方案是单独处理字体文件的输出，或者webpack.base.config.js文件。

更改字体文件的输出路径，确定，npm运行构建

嘭嘭嘭，子弹上膛了。

摘要

以上是边肖介绍的本地使用的Vue-cli配置的包文件，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！