vue项目打包出现的问题

作者: 怎么昵称 | 来源:发表于2017-08-24 18:04 被阅读0次

用vue-cli生成的项目，dist的目录结构如下：

dist
├── index.html
└── static
    ├── css
    ├── img
    └── js

最最经常在打包遇到的问题就是页面中不能正确引用其资源路径。

主要需要单独为 css 配置 publicPath 。ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api，可以为css单独配置 publicPath 。

解决办法：
在你的项目目录找到 build/utils.js 文件，对 ExtractTextPlugin 插件的options 配置。试试看。

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../',         // 注意配置这一部分，根据目录结构自由调整
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}