php项目index页面空白,如何解决vue项目打包后打开页面空白的问题

这篇文章主要介绍了vue项目打包后打开空白解决办法，内容挺不错的，现在分享给大家，也给大家做个参考。

网上很多说自己的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

如果不会打包vue项目，请看我写的另外一篇详细教程：Vue webapp项目通过HBulider打包原生APP

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

php项目index页面空白,如何解决vue项目打包后打开页面空白的问题相关推荐

打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
vue 修改项目启动后的页面_vue项目打包后打开页面空白解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...
Vue 打包后打开为空白页面并且控制台报错‘Failed to load resource: net::ERR_FILE_NOT_FOUND’
当我们开发完成后进行 npm run build打包后形成dist文件我们通过访问dist文件中的index,会出现空白页面什么都不显示的问题,控制台中还会报'Failed to load reso ...
VUE cli打包后打开白屏解决办法
使用vue cli脚手架可以快速搭建开发环境,但是开发完以后想要在本地浏览器打开的时候却是白屏的.What the F ???? 一番折腾终于找到解决办法. 项目环境版本: vue 2.5 vue-c ...
vue打包完index.html空白,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题-20210315083204.pdf-原创力文档...
解解决决Vue项项目目打打包包后后打打开开index.html页页面面显显示示空空白白以以及及图图片片路路径径错错误误的的问问题题 V ue项目运行npm run build后会生成一 dist文件夹 ...
vue 打开html流_解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上.dist文件夹里边有一个static文件和一个index.html页面,这个index就是最 ...
解决vue项目在ie、360兼容模式下空白页面问题
完美解决vue项目在ie.360兼容模式下空白页面,并提示语法错误的原因艰难路程解决办法艰难路程事实上,很多人在做项目的过程中很多存在同一个问题,于是去百度了,但是用同样的解决方法不一定就能解 ...
完美解决vue项目中弹出框滑动时，内部页面也跟着滑动问题
完美解决vue项目中弹出框滑动时,内部页面也跟着滑动问题参考文章: (1)完美解决vue项目中弹出框滑动时,内部页面也跟着滑动问题 (2)https://www.cnblogs.com/qhanti ...
快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题为什么打包后文件过大? 如何快速解决一.路由懒加载[使用es6提案的import()方式] 二.CDN引入为什么打包后文件过大? 移动app项目,使用vue- ...

php项目index页面空白,如何解决vue项目打包后打开页面空白的问题

php项目index页面空白,如何解决vue项目打包后打开页面空白的问题相关推荐

最新文章

热门文章