上线配置

打包上线

我们通过打包命令，将项目进行打包压缩，那么生成的路径是：dist/

那么大家在上线的时候一定要切记，在打包之前先把接口请求的代理地址改为线上地址
例如配置文件：vite.config.js

以下为本地配置
proxy: {
  '/api': {
    target: 'http://www.local.com/api',
    changeOrigin:true,
    rewrite: (path) => path.replace(/^\/api/, '')
  }
},


修改为线上配置 主要变化的是域名地址
proxy: {
  '/api': {
    target: 'http://www.online.com/api',
    changeOrigin:true,
    rewrite: (path) => path.replace(/^\/api/, '')
  }
},

然后运行打包命令

npm run build

最后传递到服务器上面，并配置服务器的反向代理

Apache反向代理

1、去httpd.conf 中 开启一下两个扩展
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

2、在去到虚拟主机中  将<VirtualHost *:80>标签内部的内容放进去

<VirtualHost *:80>
    ProxyRequests off

    <Proxy *>
        Order deny,allow
        Allow from Off
    </Proxy>

    ProxyPass /api http://www.onlone.com/api
</VirtualHost>

Nginx反向代理

server {
    listen       80; # 监听端口
    server_name  www.local.com;

    location / {
          #站点根目录，即网页文件存放的根目录, 默认主页目录在nginx安装目录的html子目录。 
        root   /Applications/MAMP/htdocs/class/local/dist;     

        #目录内的默认打开文件,如果没有匹配到index.html,则搜索index.htm,依次类推
        index  index.html index.htm;    

        #解决页面刷新404问题
        try_files $uri $uri/ /index.html;  
    }

    location /api {
        rewrite  ^.+api/?(.*)$ /$1 break;

        #需要代理的地址
        proxy_pass  http://www.online.com/api;
    }
}