云服务器部署项目：vue-cli 部署服务配置

ゝ一世哀愁。 2023-10-02 13:16 2阅读 0赞

单页面应用应该放到nginx或者apache、tomcat等web代理服务器中，同时要根据自己服务器的项目路径更改vue的路由地址。

如果说项目是直接跟在域名后面的，比如:[http://www.sosout.com][http_www.sosout.com] ，根路由就是 ‘/’。  
如果说项目是直接跟在域名后面的一个子目录中的，比如:[http://www.sosout.com/children][http_www.sosout.com_children] ，根路由就是 '/children '，不能直接访问index.html。

以配置Nginx为例，配置过程大致如下：  
（假设：1、项目文件目录： /mnt/html/vueCli（vueCli目录下的文件就是执行了打包后生成的目标目录下的文件）；2、访问域名：vue.sosout.com）

进入nginx.conf新增如下配置：
    server {
        listen 80;
        server_name vue.sosout.com;
        root /mnt/html/vueCli;
        index index.html;
        location ~ ^/favicon.ico$ {
            root /mnt/html/vueCli;
        }
    
        location / {
            try_files $uri $uri/ /index.html;
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Proto  $scheme;
        }
        access_log  /mnt/logs/nginx/access.log  main;
    }

`注意事项：`  
1、配置域名的话，需要80端口，成功后，只要访问域名即可访问的项目  
2、如果你使用了vue-router的history模式，在nginx配置还需要重写路由：

server {
        listen 80;
        server_name vue.sosout.com;
        root /mnt/html/vueCli;
        index index.html;
        location ~ ^/favicon.ico$ {
            root /mnt/html/vueCli;
        }
        
        location / {
            try_files $uri $uri/ @fallback;
            index index.html;
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Proto  $scheme;
        }
        location @fallback {
            rewrite ^.*$ /index.html break;
        }
        access_log  /mnt/logs/nginx/access.log  main;
    }

`为什么要重写路由？`  
因为我们的项目只有一个根入口，当输入类似/home的url时，如果找不到对应的页面，nginx会尝试加载index.html，这是通过vue-router就能正确的匹配我们输入的/home路由，从而显示正确的home页面，如果history模式的项目没有配置上述内容，会出现404的情况。

[http_www.sosout.com]: https://link.segmentfault.com/?enc=1zBWDZsLQ%2BQAeOhCFLCwQg%3D%3D.t7bvoofMqjTOUTwb7FTFTFxJj1pet1GZGNOnW82nhsA%3D
[http_www.sosout.com_children]: https://link.segmentfault.com/?enc=OytGzwV5I7V%2FOU8yYC%2BIig%3D%3D.3RQZnzSbIFq3Pe0KzvqiN5XNZuQUorwluo%2Ft2fABZqE%3D