本文共 2900 字，大约阅读时间需要 9 分钟。

Vue 默认的发布位置是在web服务的根目录下，比如地址是：

配置文件vue.config.js

vue.config.js是一个可选的配置文件，此配置文件在vue项目的根目录下，如果你的项目里没有可以自己创建。

若依原版

module.exports = {
   	// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。	publicPath: process.env.NODE_ENV === "production" ? "/" : "/",	// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）	outputDir: 'dist',	// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）	assetsDir: 'static',}

修改后

我的项目访问地址是：

module.exports = {
   	// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。    publicPath: process.env.NODE_ENV === "production" ? "/ruoyivue/" : "/",    // 打包出来的文件夹就叫这个名字，直接复制到web服务的根目录下就行了。    outputDir: 'ruoyivue',    // 资源文件在 ruoyivue/static 下。    assetsDir: 'static',    // 根据自己需要，首页文件也改了一下    indexPath: 'ruoyi.html'}

打包

改完配置后：

# 安装依赖npm install# 构建生产环境npm run build:prod

打包成功后多出一个文件夹ruoyivue

发布

把文件夹 ruoyivue 复制到web服务的根目录下。

Nginx 配置

按官方提供的这个配置稍微改改就行。

1. web服务位置的根目录：D:\\nginx\\html
2. 首页的文件名：ruoyi.html

worker_processes  1;events {
       worker_connections  1024;}http {
       include       mime.types;    default_type  application/octet-stream;    sendfile        on;    keepalive_timeout  65;    server {
           listen       80;        server_name  localhost;		location / {
   			# web服务根目录            root   D:\\nginx\\html;            # index.html 改为 ruoyi.html			try_files $uri $uri/ /ruoyi.html;			# 加了个 ruoyi.html 后面的要不要无所谓            index ruoyi.html index.html index.htm;        }				location /prod-api/{
   			proxy_set_header Host $http_host;			proxy_set_header X-Real-IP $remote_addr;			proxy_set_header REMOTE-HOST $remote_addr;			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;			# 后端的真实接口			proxy_pass http://localhost:8080/;		}        error_page   500 502 503 504  /50x.html;        location = /50x.html {
               root   html;        }    }}

若依前端访问后台接口的逻辑。

• 首先明确一下：(按照官方默认的配置，端口不同)

  前端页面在：
  后台接口在：

• 例如：登录时的图形验证码接口

  真实后台服务：
  前端访问地址：

这时如果前端直接访问后台的 肯定是不存在这个接口的。

通过两步实现

1. 前端vue项目在访问后台接口时，统一在接口前加上 /prod-api 基础路径。（默认已经在RuoYi-Vue\ruoyi-ui\.env.production文件中配置好了。这个可以根据自己需要修改。）

2. 正如我们前面的操作，在 Nginx 中配置 路径下的请求转发到 。搞定。

疑问？那开发环境下没配置nginx为啥也能访问呢？

因为默认 vue.config.js 中的 devServer.proxy 选项已经做了80到 8080的转发，所以开发时能直接跑。

// webpack-dev-server 相关配置  devServer: {
       host: '0.0.0.0',    port: port, // 这个变量是 80，在文件中能找到。    open: true,    proxy: {
         // detail: https://cli.vuejs.org/config/#devserver-proxy      [process.env.VUE_APP_BASE_API]: {
           target: `http://localhost:8080/`,        changeOrigin: true,        pathRewrite: {
             ['^' + process.env.VUE_APP_BASE_API]: ''        }      }    }

参考资料

转载地址：https://jerryjin.blog.csdn.net/article/details/113936166 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！