若依框架Vue3发布到Nginx-Windows

一.nginx部署

1.nginx下载地址

  下载最新就可以.我用的是1.24.0，下载后解压的路径千万不能有中文路径

http://nginx.org/en/download.html

3.修改配置文件

  1) 配置文件尽量不要用txt打开，因为有个编码问题,我用的Notepad,编码用的UTF-8

  2)端口号用80也可以，虽然说网上很多人不推荐，但我没感觉有什么问题

listen       80;

  3)监听名如果局域网访问用本机ip, 说是localhost也可以，外网访问的话这里要放域名或者外网IP

server_name  192.168.0.56;

  4)防止刷新404

location / {
            root   html;
            index  index.html index.htm;
			# 这里的配置 是防止 刷新后 找不到路径
            try_files $uri $uri/ @router;
        }
		 # 这里的配置 是防止 刷新后 找不到路径
        location @router {
            rewrite ^.*$ /index.html last;
        }

  5)配置代理

    这个代理不配置有跨域问题，本人经过无数努力想在java端做文章，最后还是失败

location /staging-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/; 
        }

  大概访问过程:前端访问接口如: http://localhost/staging-api/code时，

  先访问server_name再根据/staging-api/,找到代理，最后转发到proxy_pass,proxy_pass实际就是网关路径,所以前端要和代理放在一个nginx监听下

  6）最后配置文件

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;
 
        location / {
            root   html;
            index  index.html index.htm;
			# 这里的配置 是防止 刷新后 找不到路径
            try_files $uri $uri/ @router;
        }
		 # 这里的配置 是防止 刷新后 找不到路径
        location @router {
            rewrite ^.*$ /index.html last;
        }
		
		 # 只写了 生产 环境
        location /staging-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  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }         
    } 
}

二.前端部署

1.打包

npm run build:prod

2..env.staging

# 页面标题
VITE_APP_TITLE = 裕林WMS管理系统

# 生产环境配置
VITE_APP_ENV = 'staging'

# 若依管理系统/生产环境 /stage-api
VITE_APP_BASE_API = '/staging-api/'

# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip

3.vite.config.js

  这里的代理部署实际可以去掉，因为这里的代理是开发用的，我的开发所有服务都是运行代码调试的，用的localhost所以没有跨域的概念

 // vite 相关配置
    server: {
      port: 80,
      host: true,
      open: true, 
      // proxy: {
      //   // https://cn.vitejs.dev/config/#server-proxy
      //   '/staging-api/': {
      //     target: 'http://localhost:8080',
      //     changeOrigin: true,
      //     rewrite: (p) => p.replace('/^\/staging-api/', '')
      //   }
      // }
    },

5.request.js文件

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  transformResponse: [
    function (data) {

      // 对 data 进行任意转换处理
      try {
        const json = JSONbig({
          storeAsString: true
        });

        return json.parse(data);
      } catch (err) {
        return data
      } 
    }
  ],
  // 超时
  timeout: 10000
})

6.发布

  打包的文件夹dist里面的文件要原封不动的放在nginx的html文件夹下，我把html官方文件全删除

三.Nginx几个命令

1.start ningx 启动

2.nginx -t 查看目录

3.nginx -s Stop停止

4.nginx -S reload重启

四.hiprint

如果用了hiprint , defineConfig下的base 一定要改成 / ,也就是绝对路径，这就导致vue程序必须放根网站目录下，这点一直没解决，不这样写hiprint的css不启作用，会导致多打印一个空白页