如何解决vue2.0 打包以后 打开index.html出现空白页

2021年09月15日 阅读数:1
这篇文章主要向大家介绍如何解决vue2.0 打包以后 打开index.html出现空白页,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

如何解决vue2.0 打包以后 打开index.html出现空白页css

   1.打包以前修改三个文件
       1.1.第一步,找到build文件,在webpack.prod.conf.js 第25行左右 有一个对象为 output,在这里面增长一行代码html

publicPath:'./'
  output: {
    //在这里加一行代码  
    publicPath:'./',

    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
   

1.2.第二步,找到utils.js,在 第47行左右 有一个if判断为 if (options.extract),在这里面增长一行代码vue

     注意:这个是保证 加载背景图片等css样式资源不出现 路径问题webpack

publicPath:'../../'
    if (options.extract) {
      return ExtractTextPlugin.extract({
        publicPath:'../../',
        use: loaders,
        fallback: 'vue-style-loader'
      })
    }

 

1.3.第三步,找到config/index.js第46行左右 修改assetsPublicPath 路径为 './';web

2.而后你就能够  build 了,后端

3.若是build 完成后 在本地仍是空白页  或者说 放到服务器上面 是空白页  怎么办服务器

   3.1 这个就有多是 你的路由模式  出现了问题  你给的路由模式多是history 模式 ,这个文档说了 若是设置这个模式的话须要后端的配合 设置一些参数的 ,因此若是没有后端的配合的话 ,你就把这个路由的mode 改成 hash  或者是直接删除  就是默认的模式了app