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

淡淡的烟草味﹌ 2022-10-31 10:59 1321阅读 0赞

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

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

Vue 默认的发布位置是在web服务的根目录下，比如地址是：[http://127.0.0.1/index.html][http_127.0.0.1_index.html]  
但很多时候，我们的web服务下有多个网站，是通过虚拟路径来区分的，比如：[http://127.0.0.1/ruoyivue/ruoyi.html][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][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`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]

# 发布 #

把文件夹 `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][http_localhost]  
    后台接口在：[http://localhost:8080][http_localhost_8080]
 *  **例如：登录时的图形验证码接口**  
    真实后台服务：[http://localhost:8080/captchaImage][http_localhost_8080_captchaImage]  
    前端访问地址：[http://localhost/prod-api/captchaImage][http_localhost_prod-api_captchaImage]

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

### 通过两步实现 ###

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

### 疑问？那开发环境下没配置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]: ''
            }
          }
        }

# 参考资料 #

[配置参考 》vue.config.js][_vue.config.js]  
[若依vue-部署 - nginx配置][vue-_ - nginx]

[http_127.0.0.1_index.html]: http://127.0.0.1/index.html
[http_127.0.0.1_ruoyivue_ruoyi.html]: http://127.0.0.1/ruoyi/ruoyi.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]: /images/20221024/1d7d04520ce74f9faff13c031f08d76d.png
[http_localhost]: http://localhost:80
[http_localhost_8080]: http://localhost:8080
[http_localhost_8080_captchaImage]: http://localhost:8080/captchaImage
[http_localhost_prod-api_captchaImage]: http://localhost/prod-api/captchaImage
[http_localhost_prod-api]: http://localhost/prod-api/
[http_localhost_8080 1]: http://localhost:8080/
[_vue.config.js]: https://cli.vuejs.org/zh/config/#vue-config-js
[vue-_ - nginx]: http://doc.ruoyi.vip/ruoyi-vue/document/hjbs.html#nginx%E9%85%8D%E7%BD%AE