这次给大家带来vue-cli打包过程中常见问题处理，vue-cli打包过程中常见问题处理的注意事项有哪些，下面就是实战案例，一起来看一下。
1、打包命令是npm run build，这个命令实际上是在package.json中，scripts中build所对应的命令；
2、创建一个prod.server.js，这个文件不是必须的，这个文件的用处是在打包完毕之后，通过启动node.js本地服务来访问打包完成的静态文件，不需要的同学可以忽略这一点，
prod.server.js文件代码示例：
let express = require('express');let config = require('./config/index');// let axios = require('axios');let app = express();let apiRoutes = express.Router();app.use('/api', apiRoutes);app.use(express.static('./dist'));let port = process.env.PORT || config.build.port;module.exports = app.listen(port, (err) => { if (err){ console.error(err); return; } console.log('Listening at: http://localhost:'+port+'');});
登录后复制
3、在index.html中使用scrip标签引入的js和使用link引入的css文件，全部改为在main.js中直接import；我目前main.js的代码示例：
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import iView from 'iview'import 'iview/dist/styles/iview.css'import VueAwesomeSwiper from 'vue-awesome-swiper'import MuseUI from 'muse-ui'import 'muse-ui/dist/muse-ui.css'import 'src/base/css/libs/museui/muse-ui-fonts.css'import 'src/base/css/libs/museui/muse-ui-icons.css'import VueResource from 'vue-resource'import 'src/base/js/libs/waves/waves.min.js'import 'src/base/css/libs/waves/waves.min.css'import $ from 'jquery'Vue.use(VueResource);Vue.use(iView);Vue.use(VueAwesomeSwiper);Vue.use(MuseUI);Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, template: '', components: { App }})
登录后复制
4、图片的相对路径问题，要引用相对路径下的图片，首先是在在config/index.js中，将build.assetsPublicPath改为”，原来是’/’，
在.vue文件中引用图片，如果是静态引用，直接写相对路径，如果是动态引用，需要这样写
静态引用，直接写相对路径：
登录后复制
动态引用，需要require获取动态路径：
登录后复制
computed:{ logo(){ return require(`../../base/img/logo/logo${this.currentImg}.png`); }}
登录后复制
同样的动态设置背景图片也需要动态获取文件路径；
登录后复制
data() { return { backgroundStyle: { backgroundImage: `url("${require('./base/img/system/bg.jpg')}")`, backgroundRepeat: "no-repeat", backgroundSize: "100%", } }}
登录后复制
5、使用iview开发的话，打包之后，直接打开index.html之后会报错，有两个字体文件引入失败，但是我这里是没有手动引入这两个文件的，最后百度到解决办法是，在webpack.prod.conf.js中设置module.rules中的extract为false;详情见这个issue：https://github.com/iview/iview/issues/515
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
vue2.0实现输入框实时检索更新步骤详解
JS实现简单购物车功能代码分析
以上就是vue-cli打包过程中常见问题处理的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2759025.html
