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

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

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

rush:js;"> 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依赖页面

rush:plain;"> // mode: 'history' // 认hash

如果不会打包vue项目,请看我写的另外一篇详细教程:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...