手机版

解决vue-cli项目打包中的空白页和路径错误问题

时间:2021-08-30 来源:互联网 编辑:宝哥软件园 浏览:

vue-cli项目包:

1.命令行输入:npm运行构建

打包后,项目中会有一个额外的文件夹dist,这就是我们打包的项目。

第一个问题是文件引用路径。当我们直接运行打包文件夹中的index.html文件时,我们会看到网页是空白的,f12调试充满了css和js路径引用错误。

解决方案:在配置文件夹中打开index.js文件。

文件中有两个资产公共路径属性。更改第一个属性,即在构建中更改assetsPublicPath属性:

assetsPublicPath属性指定编译和发布的根目录。/'是指项目的根目录,而'。“/”指的是当前目录。

修改后,重新打包项目并运行index.html文件。我们可以看到没有报告错误。但是路由器视图的内容无法显示。

第二个问题:路由器视图中的内容无法显示。路由历史模式。

这个坑是当你使用路由后打开没有后端协作的路由历史模式,打包的文件会是空白的。

很多人花很多时间踩这个坑,网上教程基本都是第一个坑,很少被人提起。

解决方案://mode:“历史记录”,//只需关闭此模式

这并不是说这个模式不能打开。这种模式需要后端设置的配合。有关详细信息,请参阅:工艺路线文档

以上文章解决了vue-cli项目打包中的空白页和路径错误问题,是边肖分享的全部内容。希望能给大家一个参考,支持我们。

版权声明:解决vue-cli项目打包中的空白页和路径错误问题是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。