详解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 相关文章推荐
javascript是怎么继承的介绍
Jan 05 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
node.js博客项目开发手记
Mar 16 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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实现评论回复删除功能
2017/05/23 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
JavaScript运算符小结
2015/06/03 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
vue总线机制(bus)知识点详解
2020/05/10 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
python zip文件 压缩
2008/12/24 Python
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
深入理解Python3中的http.client模块
2017/03/29 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
对python中Json与object转化的方法详解
2018/12/31 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
自考毕业自我鉴定范文
2013/10/27 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
党风廉政建设责任书
2014/04/14 职场文书
妈妈活动方案
2014/08/15 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
实习生矿工检讨书
2014/10/13 职场文书
英文邀请函
2015/02/02 职场文书
情感电台广播稿
2015/08/18 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python