详解Vue前端生产环境发布配置实战篇


Posted in Javascript onMay 07, 2019

前言

首先这篇文章是写给Vue新手的,老司机基本不用看了。

当我们刚接触vue的时候,特别是对于第一次用前端框架的同学来说,心情可以说是比较激动的,框架带来的种种新体验,是以前jQuery无法给你的兴奋和满足感。但是在体验了几个demo的新鲜感之后,我们就要考虑如何把框架结合到我们实际的开发中如何应用的问题了。

下面我主要总结三个和生产发布相关的问题:资源文件发布文件夹配置,图片文件的引用,以及后台接口调试方法。

一,资源文件发布配置

一般项目都是用vue-cli脚手架搭建项目,然后编写自己的代码。vue-cli脚手架生成的配置,默认资源文件都在static文件夹下面,build发布的js和css文件也是在static文件夹下面,index.html文件则是和static形成相对路径关系。

而实际我们的生产发布环境中,页面文件和资源文件不一定在同一目录下,页面文件和js,css文件也不在同一目录下。

以php的Yii2环境为例,页面文件一般都放在views文件夹,页面访问路径可能是 “http://xxxx.com/index.php/sales-task/create ” 这样的url形式。而js,css,image等资源文件则需要放在web文件夹下,访问路径则是从根目录开始访问的。如果在web目录下新建static文件夹,访问路径是 “http://freelancer-xxxx.s3-website-us-east-1.amazonaws.com/index.html” 这样的url形式。实际开发中我们不能把所有项目资源文件都放在web目录下的static文件夹,需要按项目新建不同的文件夹,在每个项目文件夹里再新建js,css,images等文件夹来安放各自的资源文件,访问路径应该是 “http://freelancer-xxxx.s3-website-us-east-1.amazonaws.com/index.html ” 这样的url形式。

因此修改配置文件如下:

  1. 把vue项目下的static文件夹名称改成项目名称,名称由小写英文字母,横杠连接符“-”,数字组成,例如sales-task。
  2. 修改config/index.js,把dev和build属性里的assetsSubDirectorys的值都改成项目名称,例如sales-task。build的assetsPublicPath值改成“/”,这样所有资源文件的引用都从根目录引用,避免相对路径错误。
  3. 修改build/webpack.dev.conf.js,把plugins的new CopyWebpackPlugin那里的from: path.resolve(__dirname, '../static'),改为from: path.resolve(__dirname, '../sales-task')。
  4. build/webpack.prod.conf.js里也做同样的修改。
  5. 上线前发布最终线上文件时,config/index.js里的build设置属性productionSourceMap: false,同时注释掉devtool: '#source-map',以避免产生.map映射文件。正式上线前这个还是要保留的,否则调试代码会很不方便。

二,图片文件的引用方式

vue项目中有2种图片引用方式,一种是静态引用,按照我们上面的资源文件夹配置,图片路径直接写到template的html代码里,格式示例:

<img src="/sales-task/images/logo.png">

这样在开发模式和发布模式下都能正常引用到图片,好处是和正常html代码格式一样,方便代码的编写和修改。缺点是图片文件地址是静态的,替换图片后如果不手动更换文件名无法解决缓存问题。

另一种方法就是更科学的模块化方式,用require引用图片,这样发布后图片文件名也会生成唯一识别码,图片修改后就会重新生成不同的文件名,从而能避免缓存问题,另外小图片还可以直接生成base64码,减少文件请求。require引用也有两种形式,直接写在:src属性上(注意这里和静态引用不一样,不是src而是:src了):

<img :src="require('../assets/images/logo.png')">

或者把图片引用数据写在data绑定数据里:

<img :src="logoImg">
...
<script>
export default
 {
  data()
  {
   return {
    logoImg:require('../assets/images/logo.png')
   }
  }
 }
</script>

当然我还是推荐绑定数据的方法,代码看起来更清爽,也便于维护。

另外需要说明的是在vue的<style></style>块内的样式里定义的background-image引用图片不需要require引用,直接通过相对路径引入就可以实现上面相同的效果。

三,后台接口调试方法

这里后台接口调试指的是在开发模式下的调试。

vue的开发模式是通过webpack-dev-server启动一个本地服务,所以在开发模式下调用后台接口就产生了跨域问题。这里要说明一下,如果要调用的后台接口本身就是跨域的接口,也就是说页面和接口文件不在同一个域名下,跨域问题需要在后端设置,这时其实vue项目不需要特殊配置了,因为本地访问和发布后访问都是跨域的,解决后端跨域就都解决了。所以我们这里要配置的,还是针对发布以后页面和接口不存在跨越问题,只是开发模式下本地服务和接口产生的跨越问题,如何解决。

首先还是打开config/index.js,找到module.exports里的dev,里面有一项proxyTable,默认是空的,我们要按照我们的接口路径,修改如下:

proxyTable: {
    '/sales-task-api':{
      target:"http://xxxxx.com/sales-task-api",
      changeOrigin:true,
      pathRewrite: {"^/sales-task-api" : "/"} 
    }
  }

注意上面3个地方的接口路径名称(示例中的"sales-task-api")要保持一致。

例如实际要调用的接口地址是:http://xxxxx.com/sales-task-api/get-user-list ,经过这样配置设置后,我们在vue中就可以通过 "/sales-task-api/get-user-list" 这样的地址调用,也不会产生跨域问题。同时因为是采用的根目录访问路径,在生产发布以后也不会产生接口访问路径错误问题。

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

Javascript 相关文章推荐
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
canvas实现图像放大镜
Feb 06 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
7个好用的JavaScript技巧分享(译)
May 07 #Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 #Javascript
vue搜索和vue模糊搜索代码实例
May 07 #Javascript
详解Vue demo实现商品列表的展示
May 07 #Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 #Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 #Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 #Javascript
You might like
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
深入php self与$this的详解
2013/06/08 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
python实现控制台输出颜色
2021/03/02 Python
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
百度JavaScript笔试题
2015/01/15 面试题
助学贷款贫困证明
2014/09/23 职场文书
民间借贷协议书范本
2014/10/01 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
财政局个人总结
2015/03/04 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书