搜索
首页web前端js教程使用vue-cli打包需要注意哪些方面

这次给大家带来使用vue-cli打包需要注意哪些方面,下面就是实战案例,一起来看一下。

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

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文件中引用图片,如果是静态引用,直接写相对路径,如果是动态引用,需要这样写

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

<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`);
 }
}

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

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

如何操作vue项目打包给服务器

怎样使用webstorm添加*.vue文件

以上是使用vue-cli打包需要注意哪些方面的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
实现流畅运行CAD所需的配置是什么?实现流畅运行CAD所需的配置是什么?Jan 01, 2024 pm 07:17 PM

流畅使用cad需要什么配置要想顺利运用CAD软件,需要满足以下配置要求:处理器要求:为了能够流畅运行《文字玩出花》,您需要至少配备一台IntelCorei5或AMDRyzen5以上的处理器。当然,如果您选择更高性能的处理器,将能够获得更快的处理速度和更好的性能。内存是计算机中一个非常重要的组件,它对于电脑的性能和使用体验有着直接的影响。一般来说,我们推荐至少8GB的内存,这样可以满足大部分日常使用的需求。但是,为了获得更好的性能和更流畅的使用体验,建议选择16GB或以上的内存配置。这样可以确保在

MySQL中.ibd文件的作用详解及相关注意事项MySQL中.ibd文件的作用详解及相关注意事项Mar 15, 2024 am 08:00 AM

MySQL中.ibd文件的作用详解及相关注意事项MySQL是一种流行的关系型数据库管理系统,数据库中的数据存储在不同的文件中。其中,.ibd文件是InnoDB存储引擎中的数据文件,用于存储表中的数据和索引。本文将对MySQL中.ibd文件的作用进行详细解析,并提供相关代码示例以帮助读者更好地理解。一、.ibd文件的作用:存储数据:.ibd文件是InnoDB存

清华光学 AI 登 Nature!物理神经网络,反向传播不需要了清华光学 AI 登 Nature!物理神经网络,反向传播不需要了Aug 10, 2024 pm 10:15 PM

用光训练神经网络,清华成果最新登上了Nature!无法应用反向传播算法怎么办?他们提出了一种全前向模式(FullyForwardMode,FFM)的训练方法,在物理光学系统中直接执行训练过程,克服了传统基于数字计算机模拟的限制。简单点说,以前需要对物理系统进行详细建模,然后在计算机上模拟这些模型来训练网络。而FFM方法省去了建模过程,允许系统直接使用实验数据进行学习和优化。这也意味着,训练不需要再从后向前检查每一层(反向传播),而是可以直接从前向后更新网络的参数。打个比方,就像拼图一样,反向传播

Python中的lambda函数是什么,为什么我们需要它?Python中的lambda函数是什么,为什么我们需要它?Aug 25, 2023 pm 02:41 PM

在本文中,我们将学习Python中的lambda函数以及为什么需要它,并查看lambda函数的一些实际示例。Python中的lambda函数是什么?Lambda函数通常称为“匿名函数”,与普通Python函数相同,只不过它可以不带名称进行定义。>def关键字用于定义普通函数,而lambda关键字用于定义匿名函数。然而,它们仅限于单行表达。它们与常规函数一样,可以接受多个参数。语法lambdaarguments:expression此函数接受任意数量的输入,但仅计算并返回一个表达式。Lamb

Vue 中 Vue-cli 的详细使用方法指南Vue 中 Vue-cli 的详细使用方法指南Jun 26, 2023 am 08:03 AM

Vue是一种流行的前端框架,它的灵活性和易用性受到了许多开发者的青睐。为了更好的开发Vue应用程序,Vue团队开发了一个强大的工具-Vue-cli,使得开发Vue应用程序变得更加容易。本文将为您详细介绍Vue-cli的使用方法。一、安装Vue-cli使用Vue-cli之前,需要先安装它。首先,您需要确保已经安装了Node.js。然后,使用npm安装Vue-c

Vue-cli脚手架工具使用及项目配置说明Vue-cli脚手架工具使用及项目配置说明Jun 09, 2023 pm 04:05 PM

Vue-cli脚手架工具使用及项目配置说明随着前端技术的不断发展,前端框架也越来越受到开发者的关注。Vue.js作为前端框架的佼佼者,已经被广泛应用于各种Web应用的开发中。Vue-cli是Vue.js官方提供的一个基于命令行的脚手架,可以帮助开发者快速初始化Vue.js项目结构,让我们能够更专注于业务开发。本文将介绍Vue-cli的安装和

nginx怎么部署访问vue-cli搭建的项目nginx怎么部署访问vue-cli搭建的项目May 15, 2023 pm 10:25 PM

具体做法如下:1、创建后台服务器对象upstreammixVueServer{serverbaidu.com;#这里是自己服务器域名}2、创建访问端口和反向代理规则server{listen8082;server_namelocalhost;location/{rootE:/mix_vue/dist;#定位到项目的目录#indexindex.htmlindex.htm;try_files$uri$uri//index.html;#根据官网这规则配置}location~\.php${proxy_p

Vue-cli脚手架的使用及其插件推荐Vue-cli脚手架的使用及其插件推荐Jun 09, 2023 pm 04:11 PM

Vue-cli是Vue.js官方提供的搭建Vue项目的脚手架工具,通过使用Vue-cli可以快速搭建Vue项目的基本骨架,便于开发人员将注意力集中在业务逻辑的实现上,而不用花费大量时间来配置项目的基础环境。本文将介绍Vue-cli的基本使用方法以及常用的插件推荐,旨在为初学者提供一份Vue-cli的使用指南。一、Vue-cli的基本使用方法安装Vue-cli

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境