Vue3+TS+Vite项目部署（Windows10）

海浪在开花

已于 2023-06-11 15:15:11 修改

阅读量742

点赞数

文章标签： vue.js 前端

于 2023-06-11 15:15:03 首次发布

本文链接：https://blog.csdn.net/qq_43665890/article/details/131153348

版权

该文介绍了如何使用Vue3、TypeScript和Vite构建的项目进行打包，并在Windows10环境下部署到Nginx服务器。首先，通过`npmrunbuild`生成dist文件，然后下载并配置Nginx，特别是修改nginx.conf文件，设置监听端口、服务器名以及重定向规则，最后将dist文件复制到html目录下，并代理后端API接口。

摘要由CSDN通过智能技术生成

1、项目打包

npm run build 生成dist文件
在这里插入图片描述

2、安装和配置nginx

官网下载安装包，cmd命令运行，将dist拷贝到html文件下，详情可见：https://www.cnblogs.com/taiyonghai/p/9402734.html
在这里插入图片描述

重点在于nginx.conf的配置
在这里插入图片描述


        listen       8083;
        server_name  183.168.98.105;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/dist;
            index  index.html index.htm;
            if (!-e $request_filename) {
       	 rewrite ^/(.*) /index.html last;
        	 break;
            }
        }

        location ^~/api { 
        	rewrite ^/api/(.*)$ /$1 break; #重置api
        	proxy_pass http://218.199.2.33:8080;  #****后端接口地址
		}