部署

提醒

默认提供了 mock 数据，但是在 build 之后 mock 数据将不再起作用

基本配置

web端框架可以使用两种路由方式：HTML5 和 hashHistory

可以在 env.production 中进行配置选择用哪个方式：

<!-- hashHistory -->
VITE_ROUTER_HISTORY = "hash"  //默认是hash
<!-- HTML5 模式 -->
VITE_ROUTER_HISTORY = "h5"

hashHistory 模式使用如 https://cdn.com/#/users/123 这样的 URL，取井号后面的字符作为路径。HTML5 则直接使用 https://cdn.com/users/123 这样的 URL。使用 hashHistory 时浏览器访问到的始终都是根目录下 index.html。

使用 HTML5 模式则需要服务器做好处理 URL 的准备，处理应用启动最初的 / 这样的请求应该没问题，但是由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。

要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。

部署到非根目录

部署在非根目录是一种常见的需求，在web端框架中提供一键配置功能。 可以在 env.production 中进行配置路径：

假设我们需要部署在/fe目录下:

<!-- hashHistory -->
VITE_ROUTER_HISTORY = "hash,fe" 
<!-- HTML5 模式 -->
VITE_ROUTER_HISTORY = "h5,fe"

部署到不同平台

使用 nginx

nginx 作为最流行的 web 容器之一，配置和使用相当简单，只要简单的配置就能拥有高性能和高可用。推荐使用 nginx 托管。示例配置如下：

 server {
        listen 5173;
        server_name localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        # 配置 Gzip 压缩
        gzip on;
        gzip_comp_level 6;
        gzip_min_length 1000;
        gzip_proxied any;
        gzip_types text/plain text/css application/json application/javascript application/xml application/xml+rss text/javascript;

        location / { 
           #try_files $uri $uri/index.html /index.html; # HTML5模式需要此配置
           root /home/base-web/dist/;  # 配置工程的根目录
           index index.html index.htm;  # 配置入口文件
        }

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

使用Apache

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>