1.修改css文件的加载路径
修改在项目根目录中的build目录中util.js,你不修改的话打包出来的路径是在static/css下的,举个例子如果你的css文件中在开发环境中引入了一个字体文件,但是打包后他css文件寻找路径是在static/css/你的字体文件,static/css显然不是我们想要的,我们的目录是往上两个层级目录中的。因此要加上注释中的标明的语句
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
//加上这一句
publicPath:'../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
2.修改打包后加载文件路径
找到config/index.js,
在那个build的对象中修改assetpulblic的值为./
3.静态资源及动态路径图片的处理
这是一个大坑,相信很多人在尝试使用动态图片路径的时候发现报错,然后百度发现有人说把静态资源放到时/static目录下,nice,这波,我相信很多人都会这样做,but,打包之后,所有图片资源都会用/static路径进行寻找。除非你的web服务器根目录配置就是dist目录,/static就不会报错,但是如果你的的web服务顺根目录配置不是dist目录,dist目录只是一个子文件夹,那么/static就会不存在。
而且如果你想要进行webapp的本地打包,把资源都放在本地,打包成webapp的话。你的/static肯定就凉。那么如何才能正确使用图片呢?
4.在vue-cli中正确使用图片
查看webpack.base.conf,默认有一个@的resolve的目录指向的src,因此所有vue组件中(样式不能,样式只有通过路径不能通过@)请求的静态资源文件 路径,都可以这样@/路径/文件,@指向的是src。打包后就可以正确使用了。
那么还有一个需求,使用动态路径比如果说我在vuex中存一个默认用户头像路径,想用动态的方式。
经过一波百度,可以这样
userImg:require('@/static/images/default_user.png')//用户头像
还是要给webpack进行解析