对于当前的Vue3项目来说,打包使用的是Vite工具,打包命令为 npm run build

Vue项目打包 | Vite工具

工具文档https://cn.vitejs.dev/config/

应用基础路径设置

base
类型: string
默认: /
用于设置开发或生产环境服务的公共基础路径。合法的值包括以下几种:
	绝对 URL 路径名,例如 /foo/
	完整的 URL,例如 <https://foo.com/(原始的部分在开发环境中不会被使用)>
	空字符串或 ./(用于嵌入形式的开发)

部署到nginx服务器

  1. 先搭建好Nginx服务器的环境

    Nginx服务器配置

  2. 将打包后的目录上传到服务器的nginx的html目录下

  3. 修改nginx服务的配置文件,使其指向打包后的目录

# nginx.conf文件配置示例
server {
        listen       80; #端口配置
        # server_name  www.xxxxxxx.cn; # 有域名的话可以在这里配置
        #root         /usr/share/nginx/html; #配置访问vue资源的路径
        
        location / {
                root     /opt/nginx/html/dist; #同上面的root,也可以在这里配置访问vue资源路径
                index index.html index.htm;
                try_files $uri $uri/ /index.html;
        }
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }