vue项目部署方式:tomcat部署和nginx部署

一般项目前后端分离得话，都会用nginx作为反向代理转发的。
因为项目要兼容ie9,使用axios发ajax请求的时候,不能通过CORS解决跨域的问题,所以尝试部署nginx作反向代理

其中 vue+webpack+vue-router(history) 部署到nginx服务器下，非根目录，前后端怎样配置文件 这篇文章详细说明了怎么打包vue项目,记得修改config下的indexjs文件
修改为:(只显示修改的部分)

关于nginx的配置,一定需要注意第二篇文章说到的问题;

proxy_pass转发的路径后是否带 “/” 的意义都是不一样的,假设有请求 >微信小程序前后端分离的主要实现方式是将前端和后端的代码逻辑分开，前端负责展示和交互，后端负责数据处理和逻辑控制。下面简单介绍一下微信小程序前后端分离实现的一些关键步骤：
1 前端代码开发：使用微信小程序开发者工具或其他工具，开发出前端的界面、功能、逻辑代码等。
2 后端接口开发：后端负责提供API接口，承担数据处理和逻辑控制等任务。采用RESTful API 或GraphQL API 形式提供前端需要的数据接口。
3 前后端接口对接：在前端代码中，需要对后端提供的接口进行调用，获取数据进行展示，完成前后端交互。
4 服务端部署：将后端代码部署到服务器上，在服务器上运行后端代码，使得前端发起请求后能够得到正确的数据返回。
5 网络安全和数据安全：在前端和后端的实现过程中，需要注意网络安全和数据安全的问题，保证通信过程中的安全以及数据的保密性和完整性。
以上是微信小程序前后端分离实现的一些关键步骤，需要注意的是，该过程需要前端和后端开发人员进行密切协作，并进行适当的测试和调整，以保证整体的实现效果和性能。

在搞清root，alias，try_files的基本用法后，我开始尝试vue项目的部署。
（用法我之前的文章也研究过）
此前，听说挺多小伙伴会遇到vue-router-history模式种种问题，比如路径无法匹配，找不到静态资源，刷新页面404，etc

不急，只要找到原因，问题是可以迎刃而解的。

项目部署环境一般可以分为三种：生产环境，测试环境，开发环境。

开发环境 ：开发环境时程序员专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具，是最基础的环境。

生产环境 ：生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志，是最重要的环境。部署分支一般为master分支。

测试环境 ：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产服务器，是开发环境到生产环境的过渡环境。

测试环境的分支存在bug，一般不会让用户和其他人看到，并且测试环境会尽量与生产环境相似。

如何区分生产环境和开发环境？

processenvNODE_ENV 是 node 的全局变量 process 的一个属性，它的作用是区分当前环境是生产环境还是开发环境，

可以参考学习： 理解webpack中的processenvNODE_ENV

其实一般的vue单页面应用项目中，遇到路径无法匹配，或者资源引用错误问题都是由于以下几个属性造成的，如果你经常翻官网文档，那看到这里应该就已经会意，他们分别是：

接下来我将讲解以下这几个属性的使用。

依照官网的解释，贴一张用法图：

当使用基于 HTML5 historypushState 的路由时，“相对 publicPath” 会受到限制，即是说在使用history模式时，publicPath需要设置为绝对路径。那么在vueconfigjs文件中，你应该这样配置：

在nginx配置文件中你就需要这样配置：
假设我的项目名为history，并且放在/usr/local/webserver/nginx/myProject 目录下，如tree图

示例贴一下： 珂朵莉的服务器 (点击about会使用路由跳转)

如果你的配置出现页面空白，或者404访问错误，资源引用问题（F12可观察），这时你就要检查publicPath，assetsDir甚至是nginx有没有配置正确了。

我觉得原因是页面刷新时，服务器找不到任何的静态资源，就报404，那么解决办法就简单了： 你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 indexhtml 页面，这个页面就是你 app 依赖的页面。即使用try_files 寻找indexhtml。
可以参考本项目的nginx配置：

但如此配置后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 indexhtml 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
参考官网例子：

另一方面,有可能是Vue-Router没有配置好，需要注意初始化Router时候的base参数:

如此项目部署就完成了。

感谢博哥指出之前文章错误之处，已经修正，谢谢

想要将前端Vue + 后台管理系统上线，需要以下步骤：

将前端Vue程序打包为静态文件，使用npm或yarn运行命令： npm run build或yarn build。

在你的服务器上，可以使用FTP或SCP等工具将静态文件上传到服务器。

配置服务器以在Web服务器（例如Apache或Nginx）上提供静态文件。

将后台管理系统部署到服务器上（例如Nodejs），并确保其在需要时访问Vue的静态文件。

配置Web服务器以将所有>

配置Web服务器以使用SSL证书（如Let’s Encrypt）启用>

通过这些步骤，您可以将Vue +后台管理系统部署到生产环境中并运行。

1   首先 vue中 是用的axios 发请求,  axios 支持Promise 非常好用,  可以在请求后的then()中拿到请求回来的数据,像这样

2    请求方式有很多, 如get post put    get 又称为 queryParams 所以携带参数后看发的请求是拼串的,像这样

        写的时候你可以采取拼串的写法 像   'page = ' + page + '&size=‘size 这种写法,但这种写法过于死板, 当后台要求你穿的参数 是有值时就传 没值时不传 这样就不可以了 因为就算做收集的表单没有数据,也会传一个key过去,这样到后台 后台就会收到一个空值 , 这时候你可以用get请求的另一种方式   params, 这种写法相对灵活 写起来也比较简便 像这样

        但当你被要求没值时不传 你就要做一些处理了  比如 把所有要传得数据都放在一个对象中,在发请求前对象做一下处理 删掉没有值得那条属性 比如这样

3   还有就是 发请求的问题了   因为在开发的时候会有跨域问题,我们一般为了方便都会 配置一个代理proxyTable, 但是在打包部署后在服务器上会有问题   因为服务器上没有跨域 请求地址会错, 但是像我上篇帖子中说的那样  每一次打包前都 把请求地址改为服务器地址 那样又很麻烦, 所以我是这么做的，

我在config/devenjs中配置了一下 像这样

在config/prodenvjs中这样配置

在组件中发请求时这样写

我认为这样还是比较好用的   如果那里除了问题你需要在 调试工具的network中查看请求地址 看是不是正确 ，不正确改就行了

                这些都是比较基础的,但很实用,希望可以帮到你们

---