vue打包后的常见问题有哪些，如何解决-群英

上一篇：CSS3自定义滚动条样怎样实现的，包括哪些部分下一篇：CSS mask-composite如何使用，能实现什么效果

今天这篇给大家分享的知识是“vue打包后的常见问题有哪些，如何解决”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“vue打包后的常见问题有哪些，如何解决”文章能帮助大家解决问题。

vue打包后js和css、图片不显示，引用的字体找不到问题；图片一般都是背景图片。

一、vue打包出现js和css不显示问题：

1、不使用mode：‘history’

2、使用mode：‘history’手动添加：

dist包不是服务器跟目录，在index.htm里手动给js和css添加dist目录即可/dist/；

3、或者使用mode：‘history’修改配置：

config里面的index.js找到env: require('./prod.env')模块(新版本build: {),将下面的assetsPublicPath: '/' 改成assetsPublicPath: './' 然后将dist放在服务器上就可以运行了，建议使用这种方法，灵活改动少

二、vue打包出现图片不显示，不能加载字体问题：

不出现的图片一般都是背景图片，打包后会发现图片css样式是 background-image: url(static/img/img@2x.c634efc.png) ，

加载路径是 http://域名/跟目录/static/css/static/img/img@2x.c634efc.png，

或者 http://域名/static/css/static/img/img@2x.c634efc.png

打开跟目录发现图片存放在 static/img下面，根本不在static/css/static/img下面所以加载图片失败。

解决办法：

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

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

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

用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。更改工程 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置，重新打包：

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: '../../', 配置后重写打包即可。

感谢各位的阅读，以上就是“vue打包后的常见问题有哪些，如何解决”的内容了，经过本文的学习后，相信大家对vue打包后的常见问题有哪些，如何解决都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！