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

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

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

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

module.exports = {
      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在同一级目录下面。  所以要改为  ‘./ ’ ###

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

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

### 原文链接：[https://blog.csdn.net/wang1006008051/article/details/78066140][https_blog.csdn.net_wang1006008051_article_details_78066140] ###

[https_blog.csdn.net_wang1006008051_article_details_78066140]: https://blog.csdn.net/wang1006008051/article/details/78066140

发表评论取消回复

表情：

评论列表（有 0 条评论，661人围观）

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

相关阅读

相关 vue项目打包后在ie浏览器下出现空白页

如果是vue-cli2.0 在webpack.base.conf.js文件里的。

我不是女神ヾ/ 2024年04月24日 21:01/ 0 赞/ 93 阅读

相关 Excel——打开后空白，解决方法

文章目录 * 问题描述 * 解决方法 * * 打开注册表 * 修改注册表信息问题描述我的Excel2013打开后没有任何报...

水深无声/ 2024年04月19日 13:11/ 0 赞/ 116 阅读

相关 Vue项目打包部署后首页空白的问题

问题描述在进行项目开发的时候，用Vue进行项目框架的搭建并开发，开发完成时需要部署到客户现场，通过命令 npm run build 将项目打包，然后上传至服

た入场券/ 2023年07月01日 10:54/ 0 赞/ 59 阅读

相关 Vue项目打包时页面空白

修改config/index.js ![在这里插入图片描述][2021042814040156.png] `/` 改为 `./` ![在这里插入图片描述][wat

女爷i/ 2023年01月17日 08:55/ 0 赞/ 210 阅读

相关解决vue3打包过后空白页面

解决vue3打包过后空白页面在项目根目录下，新建一个vue.config.js文件 module.exports = { // 基本路径

深碍√TFBOYSˉ_/ 2022年11月17日 05:18/ 0 赞/ 582 阅读

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

主要就是： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

太过爱你忘了你带给我的痛/ 2022年09月01日 14:49/ 0 赞/ 494 阅读

相关 XXX.chm打开后显示空白的解决办法

今天下载了一个Quartz的API帮助文档，打开时提示警告，打开后右面显示空白。 ![Center][] ![Center 1][] 解决办法：右键打开文件属

绝地灬酷狼/ 2022年07月13日 03:55/ 0 赞/ 283 阅读

相关 vue-cil3项目打包后浏览器打开空白问题

vue项目目录结构： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

比眉伴天荒/ 2021年09月29日 02:48/ 0 赞/ 643 阅读

相关 vue项目打包出现空白

一位大牛写的 vue项目打包终端运行命令 npm run build 点击index.html，通过浏览器运行，出现以下报错，如图： ![70][] 那么应该如何

Myth丶恋晨/ 2021年09月19日 22:32/ 0 赞/ 539 阅读

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

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

我会带着你远行/ 2021年09月16日 21:52/ 0 赞/ 662 阅读