vue + CI + APACHE 前后端分离服务器部署踩坑（vue-cli-3）

Posted 2023-04-23

参考技术A

1.前端本地开发环境需要配置代理：
在项目路径下创建 vue.config.js ，内容如下：
const path = require(\'path\');

module.exports =
// publicPath:\'http:// .com/mm\', // 线上
publicPath:\'\', //本地
outputDir: process.env.NODE_ENV === "development" ? \'devdist\' : \'dist\', // 不同的环境打不同包名
devServer: // 配置服务器
port:8891,
open:true,
https:false,
// disableHostCheck: true,
overlay:
warnings: true,
errors: true
,
proxy: //主要是这里，设置代理！！！！
\'/api\':
target: \' http://www . .com：****\',
changeOrigin: true,
ws: true,
pathRewrite:
\'^/api\': \'\'



,
configureWebpack: // 覆盖webpack默认配置的都在这里
resolve: // 配置解析别名
alias:
\'@\':path.resolve(__dirname, \'./src\'),
\'@a\':path.resolve(__dirname, \'./src/api\'),
\'@f\':path.resolve(__dirname, \'./src/filters\'),
\'@u\':path.resolve(__dirname, \'./src/utils\'),

2.设置完代理之后可以请求url直接用 ： \'/api/\' + *** 代替

3.如果前端的路由是‘history’模式，则需要在部署服务器时，在index.html同路劲下新增文件 ： .htaccess, 内容如下：
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %REQUEST_FILENAME !-f
RewriteCond %REQUEST_FILENAME !-d
RewriteRule . /index.html [L]
</IfModule>

主要是为了刷新的时候，路由重写到 index.html下面。

Vue.js---实现前后端分离架构中前端页面搭建

【Vue.js实现前后端分离架构中前端页面搭建】

一、前后端分离

1. 简介

前后端分离属于软件架构的一种。其核心思想是把前端项目（Node.js实现的）和后端项目独立部署到不同的服务器上，前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。

使用前后端分离架构的项目在项目组中往往配备前端工程师和后端工程师。后端工程师就是我们，对于我们我们来说，不需要在项目中编写页面了，写到控制器返回数据即可，最后把项目部署到服务器上。而前端项目中主要是一些HTML、JavaScript、图片等资源，如果希望能够独立运行就需要借助基于Node.js的一些前端框架。java框架基础

2. 实现前后端分离的常用前端框架

对于前端工程师来说常用的就是Vue.js和React.js和angularJS。他们是前端工程师常用的三大框架。

Vue.js 小巧，灵活，功能却很强大。在市场上占有率更高，属于成熟稳定的框架。在课程中讲解此框架，后面的项目的前端页面也是基于Vue实现

React相比Vue.js更新一些，近几年有追赶Vue.js的架势。更适合做移动项目。

AngularJS相比Vue更加大量一些。只有在一些大型项目中才可能被使用。

3. 前后端分离和动静分离

前后端分离软件架构方式。前端页面和服务端项目分别部署。

动静分离指“动态页面（JSP）”和静态页面分离开。很多时候为了让页面访问速度更快，把原来的动态页面（JSP）转换为静态页面（HTML）（可以借助Nginx实现）访问时访问静态页面。

二、Vue.js概述

1. 简介

Vue是一个渐进式的JavaScript框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，与现代化的工具以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. SPA介绍

Vue.js属于SPA一员。

英文全称：Single Page web Application ，SPA

中文全称：单页Web应用。

整个应用就一个页面，客户端页面通过与服务端的交互动态更新页面中内容。

2.1 优点

符合前后端分离工作模式：单页面应用可以结合Restful，符合前后端分离开发。

良好的用户体验：应用没有页面跳转，全是局部刷新，整体页面更流畅。

减轻服务器端压力：由于都是局部刷新对服务器压力更小

多平台共享：无论是移动端、电脑端都可以共享服务端接口。通过作用域传值就无法实现接口共享。

2.2 缺点

SEO难度大 对于单页面应用在SEO搜索时可能页面搜索到的就是空的<div>。

首页渲染耗时长 首页需要一次加载多个请求，渲染时间可能会比较长。

3. MVVM介绍

Vue.js使用了前端中常用的分层思想MVVM。

MVVM分为M、V、VM

M（Model） 也就是页面中单独数据

V （View）是页面中HTML结构

VM（View-Model） 当V需要调用M中数据时，由VM做中间处理

3.1 示例

data() 里面的内容就是数据。也就是Model。

<template> 页面内容。也就是View

name 把data中数据传递给<template>是由Vue帮助完成的。也就是VM

三、名词解释

1. Node.js

对Chrome V8引擎进行了封装，使得JavaScript能够脱离浏览器环境，独立运行（给我的感觉是写了一个项目，项目中只有页面相关代码，发布到tomcat中进行运行，可以浏览器访问这些页面内容）。同时能通过Node.js直接访问数据库的能力。

目前前端市场都是使用基于Node.js的框架。而不是直接使用Node.js。

前后端分离之所以前端项目能够独立运行就是借助Node.js.

2. npm

npm是Node.js中的一个工具。通过npm可以实现一些组件的安装。效果和Linux中的yum有类似。

使用Node.js时不是一下所有东西都能下载下来，有一些是第三方提供的，有些是插件，当需要使用这些东西的时候，通过npm install 进行安装即可。

3.webpack

是前端开发中的项目管理工具。和我们在开发Java时Maven的作用类似。

4. Vue-cli

Vue-cli是Vue.js的客户端工具。通过Vue-cli可以实现Vue项目脚手架功能等，进行快速搭建。

四、总体环境准备

1. Node.js安装

运行软件中node-v12.16.1-x64.msi，所有的过程都点击next按钮。

安装完成后在命令行中运行命令查看是否安装成功。

查看node的版本

node -v

查看npm版本

npm -v

2. 安装npm淘宝镜像

国内使用npm进行下载资源时比较慢，可以使用国内镜像提升下载速度。

本次课程使用淘宝镜像进行操作，在命令行输入命令进行安装

运行完成后通过cnpm命令查看是否安装成功，成功会提示下面信息。如果没有成功会提示没有cnpm命令。

以后所有官方文档中使用npm install 的命令都换成cnpm install

安装完成后，如果IDEA正在启动，需要重启IDEA，让IDEA加载Node.js相关信息。