wsl下快速部署vite+vue3项目，用来查看打包后的效果

前言

我们在编写”现代框架(vue react)”的前端项目时偶尔会遇到一个问题，就是开发环境和正式环境的页面效果不一样，这个很容易解释，因为在开发环境中，页面会植入很多开发时才需要的文件，而正式环境则强调加载速度，需要文件压缩，分包等，两个环境的需求存在明显差异，这就导致了预期的结果可能会出现偏差。

假如出现上述情况，我们想要再本地查看打包后的效果，就可以通过以下方法快速搭建一个本地的服务器来模拟正式环境，当然前提是系统为windows10/11，并且能访问microsoft store，也就是微软应用商店。

准备

1.进入microsoft store在搜索栏输入ubuntu，这里建议安装Ubuntu 22.04.3 LTS版本，关于ubuntu这里不展开讨论，只需要知道他是一个使用非常广泛的linux系统即可，在界面点击安装打开

2.按照提示设置账户和密码，这里设置一个自己能记住的就行，注意输密码时候是看不到提示的，和cmd下操作一样。

安装nginx

然后在当前界面依次以下指令，首先更新apt工具

sudo apt update

注意sudo命令都需要输入当前用户的密码进行确认.

安装nginx

sudo apt install nginx -y

启动nginx

sudo /etc/init.d/nginx start

看到以下提示表示启动成功

此时在浏览器输入localhost可以访问nginx的提示页。

修改nginx配置

假设前端项目存放在d盘下的my-app目录，打包后的目录为dist，那么dist就是我们需要部署到服务器的文件夹，确定好路径后开始修改nginx配置

sudo vi /etc/nginx/nginx.conf

在http中找个空白处加上server配置，端口和root的路径按需修改，注意mnt/d指向的是windows系统的D盘

http {
	
	# 其他代码........
	
	# 只需要加上以下的server配置
    server {
        listen 9001;
        server_name localhost;
        location / {
        root /mnt/d/my-app/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
        }
    }
}

修改确认无误后先按ESC，然后输入冒号（:）+ wq，按回车即可保存并退出vim。

改动了配置文件需要重启nginx才生效。

sudo /etc/init.d/nginx reload

在浏览器输入localhost:9001就可以访问打包之后的项目了。