使用vue-cli打包过程中的步骤以及问题的解决

发布时间：2020-12-17 02:17:54 所属栏目：百科来源：网络整理

导读：1、打包命令是npm run build，这个命令实际上是在package.json中，scripts中build所对应的命令； 2、创建一个prod.server.js，这个文件不是必须的，这个文件的用处是在打包完毕之后，通过启动node.js本地服务来访问打包完成的静态文件，不需要的同学可以忽略

1、打包命令是npm run build，这个命令实际上是在package.json中，scripts中build所对应的命令；

2、创建一个prod.server.js，这个文件不是必须的，这个文件的用处是在打包完毕之后，通过启动node.js本地服务来访问打包完成的静态文件，不需要的同学可以忽略这一点，

prod.server.js文件代码示例：

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+'n');
});

3、在index.html中使用scrip标签引入的js和使用link引入的css文件，全部改为在main.js中直接import；我目前main.js的代码示例：

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获取动态路径：

同样的动态设置背景图片也需要动态获取文件路径；

5、使用iview开发的话，打包之后，直接打开index.html之后会报错，有两个字体文件引入失败，但是我这里是没有手动引入这两个文件的，最后百度到解决办法是，在webpack.prod.conf.js中设置module.rules中的extract为false;详情见这个issue：https://github.com/iview/iview/issues/515

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!