使用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 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
js实现小时钟效果
Mar 25 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
js实现右键弹出自定义菜单
Sep 08 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
基于mysql的论坛(1)
2006/10/09 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
PyTorch-GPU加速实例
2020/06/23 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
假日旅行社实习自我鉴定
2013/09/24 职场文书
公司保密承诺书
2014/03/27 职场文书
学校周年庆活动方案
2014/08/22 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电