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

网络编程 2024/12/29 佚名

3 1 2

前言

首先这篇文章是写给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形式。

因此修改配置文件如下：

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

二，图片文件的引用方式

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

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

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

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

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

另外需要说明的是在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" 这样的地址调用，也不会产生跨域问题。同时因为是采用的根目录访问路径，在生产发布以后也不会产生接口访问路径错误问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Vue,生产环境发布配置,Vue,生产环境配置

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月29日

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

微信小程序实现用table显示数据库反馈的多条数据功能示例

7个好用的JavaScript技巧分享（译）

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接