Vue本地项目过程随笔(4) 部署到服务器

你现在的这个情况是通过vue打包后，build之后的产物。

先不多说，直接说方法，最后再解释。

想运行在tomcat上，先在打包之前做一下配置：

首先在config文件夹下找到indexjs修改一下当前路径

把assetsPublicPath：‘/’改成assetsPublicPath：‘/‘

对就是/前面加个点儿。

然后重新打包。就可以直接打开了。

======================================

为什么这样做呢，因为vue的打包默认形成的是一个部署在服务器环境上的文件，如果是部署在静态站点上（express或者阿帕奇），就需要做路径转变。其实算是个小tip。

欢迎追问。

hinkphp作为服务端，为客户端提供数据。而Vue是客户端的一个JavaScript框架。便于我们对页面进行处理。
一般情况下，vue通过异步请求来获取数据。由于实例化vue时已经将相关的变量、模板等定义好了。
当获取到thinkphp回传的数据后，将会自动的把数据对应的呈现在网页上。

## vite打包：会自动编译，生成dist文件夹

## thinkjs配置: src/config/routerjs

## nginx配置

-----

在vue前端访问后端时直接使用ThinkJS的API：/api/

在Web端Vue项目开发过程中，跨域问题是不可避免的；在我参与的Vue项目中，使用服务器代理的解决方案；针对不同的环境（开发环境/生产环境），采用了不同的服务器代理方案；

服务器代理的原理大概是这样：
代理服务器和访问源（请求端）是同源的，但和被访问服务器（资源端）是不同源的，但服务器之间的访问不受浏览器同源策略的影响(即不必担心是否有跨域问题)，那么我们即可请求到同源服务器上的从被访问服务器上的获取到的请求资源了 ；

这样配置完成后，我们发起的每次>

一、JavaScript

传统的JavaScript是运行在浏览器上的，因为浏览器的内核分为两个部分

二、什么是Nodejs

Nodejs 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，运行在服务端的JavaScript。Nodejs 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

综上所述，vuejs 是通过 webpack来打包，而webpack 又基于 npm, npm需要nodejs环境。这就是为什么vuejs 还需要安装nodejs环境。

将目标dist文件夹拷贝到一台未安装nodejs的 nginx服务器上，访问页面可以正常响应逻辑。这时跟nodejs没有任何关系，服务器又不是nodejs在担当，而是nginx。如果你用nodejs来部署服务器，则需要在目标机上安装nodejs

简单的说：你既可以开发nodejs的服务程序，亦可以用基于nodejs的npm && webpack来打包 目标前端页面。vuejs 使用webpack来打包，故而需要nodejs环境。

参考文章

---