vue项目npm run build后本地打开空白，资源路径出错

• 第一：config/index.js中assetsPublicPath: ‘/‘改为’./‘

打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

• 第二：更改工程 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置，重新打包：

publicPath 属性值为打包后的 app.css文件至index.html文件的相对路径

if (options.extract) {  
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../',         // 这里是/static/css/static/img/img@2x.c634efc.png 所以跳出两层../../； 注意配置这一部分，根据目录结构自由调整
    fallback: 'vue-style-loader'
  })
} else {  
  return ['vue-style-loader'].concat(loaders)
}

加上  publicPath: '../../', 配置后重写打包即可。

• 第三：
• 第四：img中的src都在data中定义，

data() {
    return{
      imgUrl:’./static/img/ic_rotate@2x.png’
    }
}

• 第五：css中的url定义为：url("…/…/static/img/斑马.jpg")
• 第六：static文件夹在项目根目录下

• 以上方法都不行的话，简单粗暴地修改打包后的dist下的index.html文件中的资源引入地址吧。。。./static/...

页面可以正常打开了，但是vue-router跳转路由页面无法显示，其实，这个也很简单。

解决方法：打开index.js看路由配置，mode:' hash ' 改这个配置即可，如图：

一般情况router开启了history模式，如果是本地打包后访问的话，是没有问题的，但是一旦部署到服务器上面，还需要在服务端进行配置修改，若没有进行相关配置，则会报错。详细原因：传送门