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


Posted in Javascript onMay 08, 2018

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

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

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

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: '<App/>',
 components: { App }
})

4、图片的相对路径问题,要引用相对路径下的图片,首先是在在config/index.js中,将build.assetsPublicPath改为'',原来是'/',

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

在.vue文件中引用图片,如果是静态引用,直接写相对路径,如果是动态引用,需要这样写

静态引用,直接写相对路径:

<img src="../../base/img/home/me.jpg" class="round"/>

动态引用,需要require获取动态路径:

<img :src="logo" class="logo-img" @click="toggleMenu"/>
computed:{
 logo(){
  return require(`../../base/img/logo/logo${this.currentImg}.png`);
 }
}

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

<div id="app" :style="backgroundStyle">
 <s-homepage></s-homepage>
</div>
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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 上传图片预览问题
Dec 06 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
jquery拖动改变div大小
Jul 04 jQuery
小程序实现列表删除功能
Oct 30 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
js原生map实现的方法总结
Jan 19 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 #Javascript
angularjs实现的购物金额计算工具示例
May 08 #Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 #Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 #Javascript
node使用promise替代回调函数
May 07 #Javascript
node 使用 async 控制并发的方法
May 07 #Javascript
Angular 数据请求的实现方法
May 07 #Javascript
You might like
PHP三种方式实现链式操作详解
2017/01/21 PHP
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
简单实现python进度条脚本
2017/12/18 Python
python远程连接MySQL数据库
2019/04/19 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
灵泰克Java笔试题
2016/01/09 面试题
会议开场欢迎词
2014/01/15 职场文书
学校联谊活动方案
2014/02/15 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
公司捐款倡议书
2014/05/14 职场文书
个人总结与自我评价
2015/02/14 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis