vue打包history路由如何在Windows本地运行

vue-router如果用了history路由的话，打包后如果没有nginx配合的话，是无法查看效果的，下面是在Windows本地部署nginx代理来显示的方式

首先vue-router要配置createWebHistory

export default createRouter({
  history: createWebHistory(),
  routes,
})

然后 npm run build 进行打包，dist的路径需要存放好，最好单独存放在一个文件夹下面

下面是下载nginx，通过下面链接下载nginx的Windows版本

https://nginx.org/en/download.html

下面后解压，我的是解压到了D:/nginx路径下面

修改配置D:\nginx\conf\nginx.conf（根据自己解压的路径）

将配置文件内容修改到如下，其中dist路径需要更具自己dist存放路径来修改我的目前是存放在E;/dist下面

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 8080;
        server_name  localhost;

        location / {
            root   E:/dist; //这里的路径是dist存放的路径
            index  index.html;
            try_files $uri $uri/ /index.html;
        }
    }
}

修改后保存

通过管理员权限打开命令行窗口，然后进入nginx.exe的目录（在nginx的文件中），输入nginx.exe执行命令，出现下面内容就部署成功了，就可以在浏览器输入http://本地ip:8080就能访问了