html路由跳转首页空白,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 ' 改这个配置即可，如图：

image.png

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