今天这篇给大家分享的知识是“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打包后的常见问题有哪些，如何解决都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• HTML项目中如何给文本添加省略号，代码是什么

  当我们在使用样式实现多行文字一般超出都会显示省略号的效果，那么你知道这个方法要怎么去实现吗？有不少朋友对此感兴趣，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

• 在CSS中去除文本斜体样式的操作是怎样

  在css中，可以利用“font-style”属性去除em标签的斜体样式，该属性的作用就是定义字体的风格，当属性的值为“normal”时，字体显示为标准样式，也就是去除了斜体样式，语法为“em{font-style:normal;}”。

• 用AmazeUI怎样实现评论列表功能，代码是什么

  这篇文章主要介绍了AmazeUI 评论列表的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS中按钮不可点击效果怎样实现，方法是啥?

  CSS中按钮不可点击效果怎样实现？在一些特殊的情景下，我们需要暂时设置按钮不可点击，那么CSS怎样禁止button点击呢？文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• css3中的filter属性和backdrop-filter属性不同在哪？

  css3中的filter属性和backdrop-filter属性不同在哪？对于新手来说，可能不是很了解filter属性和backdrop-filter属性的区别，对此本文就给大家来介绍一下filter属性和backdrop-filter属性，需要的朋友可以参考看看。