Vue 开发|文件目录结构部署

news/2024/12/24 1:05:40

作者:阿安
链接:https://www.zhihu.com/questio...
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

基于 vue-cli 脚手架生成项目模板基础上做了些改动,加入了 vue-router ,vuex 等配套设施,本地 dev server 中加入了接口 mock 功能,还增加一个 build server 来预览 build 结果页面,前后端通过 spa 的方式实现分离,并相应做了分离后的联调,部署方案。在这里俺也对整个过程简单做个介绍吧。

目录结构

├── index.html                      入口页面
├── build                           构建脚本目录
│   ├── build-server.js                 运行本地构建服务器,可以访问构建后的页面
│   ├── build.js                        生产环境构建脚本
│   ├── dev-client.js                   开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
│   ├── dev-server.js                   运行本地开发服务器
│   ├── utils.js                        构建相关工具方法
│   ├── webpack.base.conf.js            wabpack基础配置
│   ├── webpack.dev.conf.js             wabpack开发环境配置
│   └── webpack.prod.conf.js            wabpack生产环境配置
├── config                          项目配置
│   ├── dev.env.js                      开发环境变量
│   ├── index.js                        项目配置文件
│   ├── prod.env.js                     生产环境变量
│   └── test.env.js                     测试环境变量
├── mock                            mock数据目录
│   └── hello.js
├── package.json                    npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
├── src                             项目源码目录    
│   ├── main.js                         入口js文件
│   ├── app.vue                         根组件
│   ├── components                      公共组件目录
│   │   └── title.vue
│   ├── assets                          资源目录,这里的资源会被wabpack构建
│   │   └── images
│   │       └── logo.png
│   ├── routes                          前端路由
│   │   └── index.js
│   ├── store                           应用级数据(state)
│   │   └── index.js
│   └── views                           页面目录
│       ├── hello.vue
│       └── notfound.vue
├── static                          纯静态资源,不会被wabpack构建。
└── test                            测试文件目录(unit&e2e)
    └── unit                            单元测试
        ├── index.js                        入口脚本
        ├── karma.conf.js                   karma配置文件
        └── specs                           单测case目录
            └── Hello.spec.js

快速开始

git clone https://github.com/hanan19850...
cd vue-spa-template
cnpm install
npm run dev

命令列表

开启本地开发服务器,监控项目文件的变化,实时构建并自动刷新浏览器,浏览器访问 http://localhost:8081
npm run dev

使用生产环境配置构建项目,构建好的文件会输出到 "dist" 目录,
npm run build

运行构建服务器,可以查看构建的页面
npm run build-server

运行单元测试
npm run unit

前后端分离

项目基于 spa 方式实现前后端分离,后端将所有 url 都返回到同一个 jsp 页面(由前端提供),此 jsp 页面也是前端的入口页面。然后路由由前端控制(基于vue-router),根据不同的 url 加载相应数据和组件进行渲染。

接口 mock

前后端分离后,开发前需要和后端同学定义好接口信息(请求地址,参数,返回信息等),前端通过 mock 的方式,即可开始编码,无需等待后端接口 ready。项目的本地开发服务器是基于 express 搭建的,通过 express 的中间件机制,我们可以很方便的添加接口 mock 功能:

在 build/dev-server.js 中新增接口 mock 处理:

// mock api requests
var mockDir = path.resolve(__dirname, '../mock');
fs.readdirSync(mockDir).forEach(function (file) {
  var mock = require(path.resolve(mockDir, file));
  app.use(mock.api, mock.response);
});

其中,mock 目录下可能有个文件内容如下,描述了一个接口的数据信息:

module.exports = {
  // 接口地址
  api: '/api/hello',
  // 返回数据
  response: function (req, res) {
    res.send(`
      <p>hello vue!</p>
    `);
  }
}

组件化

整个应用通过 vue 组件的方式搭建起来,通过 vue-router 控制相应组件的展现,组件树结构如下:

app.vue                            根组件(整个应用只有一个)
        ├──view1.vue                  页面级组件,放在 views 目录里面,有子组件时,可以建立子目录
        │   ├──component1.vue               功能组件,公用的放在 components 目录,否则放在 views 子目录
        │   ├──component2.vue
        │   └──component3.vue
        ├──view2.vue
        │   ├──component1.vue
        │   └──component4.vue
        └──view3.vue
            ├──component5.vue
            ……

单元测试

可以为每个组件编写单元测试,放在 test/unit/specs 目录下面, 单元测试用例的目录结构建议和测试的文件保持一致(相对于src),每个测试用例文件名以 .spec.js 结尾。 执行 npm run unit 时会遍历所有的 spec.js 文件,产出测试报告在 test/unit/coverage 目录。

前后端联调

前后端分离后,由于服务端和前端的开发环境处于2台不同的机器上,整个联调过程,入口页面需要引用前端机器的静态资源,又要调用后端机器的异步接口。根据入口页面的位置,我们可以使用不同的联调方案。

1.入口页面在前端机器:
通过在本地 dev-server 中使用 https://github.com/chimurai/h... 中间件把接口请求代理到后端机器,vue-cli 生成的 dev-server 中已经自带了这个功能:

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
});

最好通过启动 dev-server 时传入一个参数来控制是否打开代理功能,这样可以避免开发阶段覆盖掉我们的 mock 配置。

2.入口页面在后端机器:
后端工程里面的入口 jsp 中引用的 js 文件地址需要指向前端环境中的地址,联调时才能显示最新的修改。主要有2种实现方式: 1) jsp 文件引用一个固定域名(如 debughost)的 js 文件, 后端机器上通过修改此域名的ip指向前端机器,达到引入前端环境 js 的目的。 2) jsp 文件通过获取一个 url 参数(如 debughost)的值,这个值为前端机器的 ip 地址,再动态的插入一个 script 标签引入这个 ip 的前端 js 文件。

举个例子,假设前端机器的 ip 为 172.16.36.90,需要加载前端的js文件地址为:http://172.16.36.90:8081/main.js, 那么后端同学的机器中需要在 host 文件加一条记录:

172.16.36.90 debughost

而入口 jsp 页面中则通过以下代码开加载前端js:

var debughost = 'debughost';
    location.search.substr(1).split('&').forEach(function (item) {
        var arr = item.split('=');
        var key = arr[0];
        var value = arr[1];
        if (key === 'debughost') {
            debughost = value;
        }
    });
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://' + debughost + ':8081/main.js?' + (new Date()).getTime();
    document.head.appendChild(script);

这样,jsp 页面默认会加载 http://debughost:8081/main.js这个文件。 此外,如果不想用 debughost 这个域名的 js 文件,访问 jsp 时候还可以通过 url 带入 debughost 参数来指定前端 ip 。

部署方案

分离后前后端代码会存放在2个单独的 git 仓库中,构建过程也是分开的。后端构建时,需要依赖前端的构建结果。具体流程如下:

  1. 拉取前端项目代码 2. 构建前端(构建结果放在dist目录) 3. 拉取后端代码 4. 将前端的构建结果(dist目录里的文件)复制到后端工程中 5. 构建后端

此过程可以借助 jenkins 配置,或者,让运维同学配合修改部署脚本。

最终的项目模板会是这样:annnhan/vue-spa-template


http://www.niftyadmin.cn/n/3313656.html

相关文章

ABAP字符串比较操作中空格的影响

ABAP对字符串有很多隐形的操作&#xff0c;有时更方便程序员&#xff0c;有时又比较容易使人困惑。 比如在比较字符串的值时&#xff0c;ABAP会自动忽视有效字符后面的空格&#xff0c;而如果在字符前面有空格&#xff0c;则会影响比较的结果。 比如&#xff1a; ‘X’ 和 ‘X_…

WMvare桥接模式固定IP

一、命令行固定IP 1.配置网卡IP地址 在命令行输入“vi /etc/sysconfig/network-scripts/ifcfg-eth0”#eth0为第一块网卡&#xff0c;如果是第二块则为eth1 按照如下修改 DNS1随便填写一个DNS。 命令行输入 service network restart重启 就可以看到自己的固定IP了&#xff0c;以…

通信原理(复习)

好久没有看通原&#xff0c;还是有些忘了。通原作为本专业的基石&#xff0c;出现的几率概率还是挺高的。不想过于排版&#xff0c;只是看网课后总结一下常用的知识点&#xff0c;自己今后可以随时翻看。别人的笔记和自己做的笔记&#xff0c;侧重点总归是会有些不同的。 目录预…

【译】JavaScript数据结构(2):栈与队列

翻译&#xff1a;疯狂的技术宅英文&#xff1a;https://code.tutsplus.com/art...说明&#xff1a;本文翻译自系列文章《Data Structures With JavaScript》&#xff0c;总共为四篇&#xff0c;原作者是在美国硅谷工作的工程师 Cho S. Kim 。这是上本系列的第二篇。说明&#x…

直和和直积

今天又在文章中看到直和和直积的概念&#xff0c;顺手baidu了一下&#xff0c;粘贴下来&#xff0c;其实以前矩阵论有讲过的。。。还是到用的时候印象最深。

数字信号处理(复习)

对比研究生课程中的《现代信号处理》和本科期间的《数字信号处理》&#xff0c;发现本科期间所学的只是后续课程中的一小部分内容&#xff08;不如说是开胃菜&#xff09;&#xff0c;最近要做的就是把复习的数字信号处理的基本内容给梳理一下&#xff0c;后续是否要再总结《现…

隐藏 navigationBar 的控制器向下 偏移 20 解决

// 不向四周延展 self.edgesForExtendedLayout UIRectEdgeNone; 转载于:https://www.cnblogs.com/code-Officer/p/7242834.html

linux下编译C/C++ 程序

C/C的速度是Python和perl所无法比拟的&#xff0c;尤其对于处理超大的生物信息学文件来说。 最近在写一个最简单的fastq cut工具&#xff0c;Python简直慢到不能忍&#xff0c;8G的fastq.gz文件的cut需要6-7个小时&#xff0c;而C则只需要15-20min&#xff0c;简直就不在一个量…