vue 2.0创建项目打包后index出现空白页面

前言:今天创建一个新的项目,打包过后检查index页面出现空白,百度了一下,vue2.0 打包之前需要修改几处地方!!!

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

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),在这里面增加一行代码

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

publicPath:’…/…/’

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

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

2.然后你就可以 build 了,

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

3.1 这个就有可能是 你的路由模式 出现了问题 你给的路由模式可能是history 模式 ,这个文档说了 如果设置这个模式的话需要后端的配合 设置一些参数的 ,所以如果没有后端的配合的话 ,你就把这个路由的mode 改为 hash 或者是直接删除 就是默认的模式了

//备注:想要项目局域网内都能访问
1:修改config文件中找到 index.js 文件的host改成 ‘0.0.0.0’
vue 2.0创建项目打包后index出现空白页面_第1张图片

2:检查 package.json 文件里进行配置,scripts.dev配置是否设置 host为‘0.0.0.0’
vue 2.0创建项目打包后index出现空白页面_第2张图片

你可能感兴趣的:(vue)