vue项目打包后打开空白解决办法

我会带着你远行 2021-09-16 21:52 684阅读 0赞

网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。

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

  1. module.exports = {
  2.   build: {
  3.     env: require('./prod.env'),
  4.     index: path.resolve(__dirname, '../dist/index.html'),
  5.     assetsRoot: path.resolve(__dirname, '../dist'),
  6.     assetsSubDirectory: 'static',
  7.     assetsPublicPath: '/',
  8.     productionSourceMap: true,

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

2、另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。

  1. // mode: 'history'  // 默认hash

原文链接：https://blog.csdn.net/wang1006008051/article/details/78066140

发表评论

表情：
评论列表 （有 0 条评论，684人围观）

还没有评论，来说两句吧...

相关阅读