Vue 学习笔记 - 若依前后端分离项目发布到子目录

  • 配置文件`vue.config.js`
  • 若依原版
  • 修改后
  • 打包
  • 发布
  • Nginx 配置
  • 若依前端访问后台接口的逻辑。
  • 通过两步实现
  • 疑问？那开发环境下没配置nginx为啥也能访问呢？
  • 参考资料


Vue 默认的发布位置是在web服务的根目录下，比如地址是：http://127.0.0.1/index.html 但很多时候，我们的web服务下有多个网站，是通过虚拟路径来区分的，比如：http://127.0.0.1/ruoyivue/ruoyi.html 这就遇到一问题，如何将VUE项目发布到二级目录。
以若依系统为例，需要修改vue.config.js中的几个配置。

配置文件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',
}

修改后

我的项目访问地址是：http://127.0.0.1/ruoyivue/ruoyi.html

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

若依使用 Element Plus 若依 vue_若依分离版

发布

把文件夹 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;
        }
    }
}

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

这时如果前端直接访问后台的 http://localhost/prod-api/captchaImage 肯定是不存在这个接口的。
所以请求到了后台由nginx进行了转发。

通过两步实现

  1. 前端vue项目在访问后台接口时，统一在接口前加上 /prod-api 基础路径。（默认已经在RuoYi-Vue\ruoyi-ui\.env.production文件中配置好了。这个可以根据自己需要修改。）
  2. 正如我们前面的操作，在 Nginx 中配置 http://localhost/prod-api/ 路径下的请求转发到 http://localhost:8080/ 。搞定。

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

因为默认 vue.config.js 中的 devServer.proxy 选项已经做了80到 8080的转发，所以开发时能直接跑。
devServer.proxy 这个名字也比较直观了吧。

// 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]: ''
        }
      }
    }