使用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小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
js实现索引图片切换效果
Nov 21 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
详解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学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
python logging类库使用例子
2014/11/22 Python
在Python中使用模块的教程
2015/04/27 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
用python实现名片管理系统
2020/06/18 Python
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
一套C++笔试题面试题
2012/06/06 面试题
文秘人员工作职责
2014/01/31 职场文书
国际商务专业求职信
2014/07/15 职场文书
授权委托书公证
2014/09/14 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
2015年营业员工作总结
2015/04/23 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
Nginx速查手册及常见问题
2022/04/07 Servers
Android Rxjava3 使用场景详解
2022/04/07 Java/Android