VUE项目部署（Nginx代理：根目录与非根目录部署）

原创已于 2022-06-13 16:27:15 修改 · 8.9k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #nginx #前端

于 2022-06-10 10:33:13 首次发布

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

nginx

3 篇文章

订阅专栏

本文详细介绍了如何使用Nginx代理部署Vue前端项目。针对根目录和非根目录部署两种情况，分别提供了配置示例。对于根目录部署，推荐使用`alias`而非`root`，以避免权限问题。非根目录部署时，需在Vite或Webpack配置中设置`base`为`./`，并在Nginx中配置`try_files`指令，确保正确重定向到项目入口。

一、使用nginx代理vue前端项目

二、根目录部署

1.nginx配置

 location / {
            root   /data/XXX/XXX/;  # 此处目录是vue在服务器存放的绝对路径
            index  index.html ;
	}

注意： root /data/XXX/XXX/; 使用root时，有可能访问出现500 Internal Server Error错误

原因： root 用户没有权限

解决方案：

1.1 修改nginx配置（不建议）

找到nginx配置文件，添加root权限

2. 使用 alias 访问vue项目。nginx访问配置如下（建议使用此方案）

 location / {
            alias   /data/XXX/XXX/;  # 此处目录是vue在服务器存放的绝对路径
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
	}

配置完毕之后，直接使用http://www.ddd.com 就可以正常访问所部署的vue项目

三、非根目录部署（非根目录访问方式:http://www.ddd.com/webUi）,访问后缀添加webUi才能访问项目

1.vite打包处理方式

在 vite.config.js 下加上 base: ‘./’

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: './'
})

注意：添加 base: './' 配置，此配置完毕之后，打包出来的效果

路径全部以./ 开头：src="./assets/index.cb475d9a.js"。

如果不添加配置，直接是 src="/assets/index.cb475d9a.js"。

2.webpack打包处理方式

在webpack.prod.conf.js中，output中添加或者修改为 publicPath: ‘./'；

css、js处理方式

image处理方式：

3.nginx配置

location /webUi {
	  alias   /data/s101/vue/webUi ;
	  index  index.html ;

	  # 非根目录
	  try_files $uri $uri/ /webUi/index.html;
      }

配置完毕时候，使用http://www.ddd.com/webUi 即可成功