vue3+vite+nginx打包

在开发环境下，已经可以正常地运行一个有增删改查功能的页面了，但如何把它发布到运行服务器呢？仍有许多的问题需要探索。

网上很多文章给了很大的帮助，但总是没有说明原理，对于像我这样的初学者来说，不知其所以然，也就不能根据自己的情况加以变通，现在总算是基本走通了，就总结一下，供初学者参考：

1.在开发环境下，通过npm run dev就能启动网页服务，通过配置vite.config.ts就能实现ajax跨域访问，这些都正常了，但在实际部署时，总要把它部署到一个服务器才行。 

服务器：一般是用nginx，iis应该也是可以的，但没有深入测试，总之是要先运行npm run build来编译项目，将typescript转为javascript，生成的文件在项目目录\dist目录下。如果不编译成javascript，nginx是不能直接运行typescript的(或者需要额外的配置)。

2.在编译后，将dist目录下的文件复制到nginx目录下，再配置了nginx\conf\nginx.conf，仍会有很多错误，可以参考这篇文章：

vite+vue3打包后部署nginx Failed to load module script，空白页，404，反向代理等问题。_vite加上nginx进行反向代理-优快云博客

其中我最关心的是ajax的跨域问题，其实要解决的核心问题就是2个：

1、写在页面里的ajax url,如何在打包后，变成正确的地址？

2、访问地址正确了，nginx如何把它映射到后端api接口？

对于问题1：

网上文章很多，其实就是要定义一个公共变量，在ajax地址中拼接这个公共变量，且这个变量要分成开发环境和部署环境2个。

这个如果自己写一套机制也可以，或者就采用现成的vite的框架，建立2个配置文件：

vite在开发环境或部署环境，会分别采用这2个文件中的一个。

这个是开发环境下的文件，里面是开发环境的ajax地址。

一般网上都是用http://localhost:xxxx/ajax，我有意把ajax写成vue，以便观察后续配置哪些地方要做相应关联：

这个是vite.config.ts的配置，上面写的是vue，这里也要写vue

项目target:'http://localhost:8200/'是后端api接口地址，用于接收ajax请求

这个是部署环境的地址，

8090是在nginx配置文件配置的：

注意看红框中的，它是nginx配置的反向代理，就是通过这个来找到后台ajax服务的。

总结：在开发环境下是通过vite.config.ts来实现ajax跨域；而部署环境下是通过nginx的反向代理来实现的。这样就解决了问题2。

再接着说定义的2个变量如何使用？网上文章一般是创建一个request文件，在里面再定义一个service或其他什么名称的axios封装类，这个类的baseURL引用之前2个配置文件中定义的VITE_API_BASE_URL，这无疑是非常好的一个构想，但对于我来说，代码要重构了，之前的访问方式都是直接写成

axios.post(  '/api/values/Options',null).then((res)=>{

......这样的，而且我只是想先测通，就不做大改了，直接引用这个变量：

然后再运行npm run build，部署，数据可以正常获取

其它的坑：

1.修改nginx后，不生效，甚至关闭后仍然可以打开网页。这个是因为用start_server.bat启动,它的nginx.exe在关闭后，进程却还在后台运行。需要手工在进程管理器里关掉。我是直接重启服务器的。建议改成start nginx命令，它关闭命令窗口后就真的关闭进程了。

2.直接输入地址不能访问，可以通过以下配置来解决