vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

这里写自定义目录标题

  • 页面空白

    • 问题一：修改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。

    • 问题二：这个坑是当你使用了路由之后，在没有后端配合的情况下就手贱打开路由history模式的时候，打包出来的文件也会是一片空白的情况，

    • 问题三：图片或字体路径不对问题

页面空白

原因：打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。

问题一：修改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。

build: {

env: require(’./prod.env’),

index: path.resolve(__dirname, ‘…/dist/index.html’),

assetsRoot: path.resolve(__dirname, ‘…/dist’),

assetsSubDirectory: ‘static’,

assetsPublicPath: ‘/’,

productionSourceMap: true

assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ ’;

问题二：这个坑是当你使用了路由之后，在没有后端配合的情况下就手贱打开路由history模式的时候，打包出来的文件也会是一片空白的情况，

问题三：图片或字体路径不对问题

1.从下图可以看到，使用url-loader处理后的文件是在static目录下生成fonts目录下的文件。全部样式文件打包在css目录下app.************.css文件中。

2.打开app.******.css文件后，可以看到css中对字体的引入路径

解决办法：在build/utils文件中的下图所示位置添加 publicPath:’…/…/’

这样css文件中引入字体文件路径时就会加上…/…/了。部署到服务器，静态文件就不会报404了。

以上是 vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 的全部内容， 来源链接： utcz.com/z/378096.html

回到顶部