使用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 相关文章推荐
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
JS字符串处理实例代码
Aug 05 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Python简单进程锁代码实例
2015/04/27 Python
python写一个md5解密器示例
2018/02/23 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
简单了解python的break、continue、pass
2019/07/08 Python
如何清空python的变量
2020/07/05 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
给交警的表扬信
2014/01/12 职场文书
社区食品安全实施方案
2014/03/28 职场文书
质量保证书范本
2014/04/29 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2015年材料员工作总结
2015/04/30 职场文书
六一活动主持词
2015/06/30 职场文书
《颐和园》教学反思
2016/02/19 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
Java界面编程实现界面跳转
2022/06/16 Java/Android