详解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函数在frame中的相互调用详解
Mar 03 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
详解Bootstrap按钮
Jan 04 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 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
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
以windows service方式运行Python程序的方法
2015/06/03 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python中update的基本使用方法详解
2019/07/17 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
python 利用zmail库发送邮件
2020/09/11 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
英文自我鉴定
2013/12/10 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
初中班主任寄语
2014/04/04 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
2014年团委工作总结
2014/11/13 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android