在开发过程中，我们时常会碰到使用二级域名来维护一些项目，这时候对于vue项目来说，如果打包的时候不注意可能就会存在静态路径找不到问题。
这是因为在二级域名下，我们的文件目录一般是在服务器的二级目录，比如根目录为/,我们的项目在test下
如果我们没修改webpack的默认配置，那么我们打包出来的dist放到服务器test文件夹下肯定是会出现问题，静态路文件找不到。
1.css文件路径
仔细去查看控制台的报错，我们可以看到是GET https://test.xxx.com/static/123.css net::ERR_ABORTED 404 (Not Found)
从中我们可以看出服务器找123.css文件是在/static文件下找的，而/代表的是根目录而不是test目录
所以现在我们需要修改webpack的打包路径。
打开项目config/index.js文件，修改 build配置项assetsPublicPath为''
//config/index.js
build{
...
assetsPublicPath: '',
}
这时候我们的静态文件路径就正常了
2.背景图片或者字体文件或者其他
有时候我们刚解决了css引入，兴致勃勃地将项目放到了服务器的test目录，如果我们项目中引入了背景图片,当打开网页的时候，我们可能又会发现，背景图片又找不到了，天啦噜。。此时一万个‘草泥马’从脑海中路过有没有。。
其实解决办法也很简单
vue框架引入css的时候都是在js文件中引入的，但是打包过后又是怎么出现了单独的css文件呢，原因是强大的webpack提供了一个插件ExtractTextWebpackPlugin官方给这个插件的解释是:
它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。
懂了吧，它的任务就是将css文件分离出来，这时候我们在css写的背景图片路径可能会出现 test/static/css/static/imgs/123.png,这是为什么呢，这是因为，我们前面将assetsPublicPath改为了''所以我们的在引入背景图片的时候的路径就是相对于当前文件路径，我们的css通过ExtractTextWebpackPlugin插件被提取到了static/css目录下，所以我们的图片就成了相对于static/css目录了，肯定是不正确的，所以我们想让背景图片正常需要的路径是static/imgs/123.png,这时候让这些图片向上两个层级不是就正常了么，ExtractTextWebpackPlugin插件给我们提供了这个功能。通过添加一下配置来解决了
打开项目build/utils.js文件，修改 ExtractTextPlugin.extract({...})配置项新增`publicPath:''../../''
//build/utils.js
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
}else {
return ['vue-style-loader'].concat(loaders)
}
到此，关于vue打包后出现的静态资源路径问题差不多已经都解决了，我们可以开心的继续撸代码了。
网友评论