vue打包之静态资源路径问题

在开发过程中，我们时常会碰到使用二级域名来维护一些项目，这时候对于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打包后出现的静态资源路径问题差不多已经都解决了，我们可以开心的继续撸代码了。

最后编辑于：2019.12.17 16:33:59