vue项目npm run build后本地打开空白，资源路径出错
2019-06-19 本文已影响0人
子心_
- 第一：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模式，如果是本地打包后访问的话，是没有问题的，但是一旦部署到服务器上面，还需要在服务端进行配置修改，若没有进行相关配置，则会报错。详细原因：传送门
