vue项目部署

浅浅的花香味﹌ 2021-09-02 04:35 432阅读 0赞

开发完的vue项目，需要部署到Nginx/Tomcat服务器上运行，作为一个前端小白，刚接触vue不久，研究了一番，于是写下这篇文章，记录下来便于今后部署。

## 1.router(history)模式vue项目部署到nginx ##

1）修改router模式为history（默认为hash）

const router = new VueRouter({
      routes,
      mode: 'history'
    });

对路由模式不清楚的小伙伴，可以看这篇[vue-router路由模式详解][vue-router]

2）修改config/index.js，build下静态资源路径，完成后执行npm run build打包  
![图片描述][9c2ec261cdfed5c3a25f1116d662b889.png]

3）修改nginx配置

server {
        listen       80;//代理端口
        server_name  192.168.0.152;//代理名称（域名、ip）
        #charset koi8-r;
    
        #access_log  logs/host.access.log  main;
    
        location / {
            root test; //项目存放的地址（当前服务器位置）
            index /index.html;                        
            try_files $uri $uri/ @router; //一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，返回同一个 index.html 页面
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
    }

运行结果：  
![图片描述][d0004234de4ea7d8c512012d759fa9ad.png]

## 2.vue项目部署到tomcat ##

1）项目上线，一般需要添加项目名，并且消去vue-router产生的\#号，需要在router配置

const router = new VueRouter({
      routes,
      mode: 'history',
      base: '/test/'//项目名称 访问路由页面都需要加上这个,访问的根路径为http://ip:port/test
    });

2）修改vue.config.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

3）tomcat的配置  
在tomcat的webapps新建文件夹，文件夹名称和上面配置的根路径一致，即为test，然后将打包生成的dist文件夹里面的文件复制到test下，并且新建文件WEB-INF/web.xml。  
项目结构为：  
![图片描述][11ef1f7d44dc4f80abc42149b3b8dc81.png]  
WEB-INF目录下新增web.xml内容为：

//覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，返回同一个 index.html页面
    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                          http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
        version="3.1" metadata-complete="true">
        <display-name>Router for Tomcat</display-name>
        <error-page>
            <error-code>404</error-code>
            <location>/index.html</location>
        </error-page>
    </web-app>

详细了解可看vue官方文档后端配置[HTML5 History 模式][HTML5 History]  
4）重新启动tomcat

[http://192.168.1.104:8088/][http_192.168.1.104_8088]test/test 或是[http://192.168.1.104:8088/][http_192.168.1.104_8088]test

## 3.nginx部署多个vue项目 ##

需要在同一域名端口下，部署两个项目  
1）准备两个项目  
![snipaste\_20200323\_134954.jpg][snipaste_20200323_134954.jpg]

2）vue-test不用修改配置，直接build，vue-admin需要修改下配置

修改config/index.js
    
    build: {
        ...
        assetsPublicPath: '/admin/',
        ...
    }
    
    修改router/index.js
    const createRouter = () => new Router({
      ...
      base: 'admin',
      ...
    });

完成后重新build打包

3）修改nginx/conf/nginx.conf

server {
        listen       9090;
        server_name  192.168.0.153; 
    
        location / {
            root vue-test;
            try_files $uri $uri/ @router;
            index index.html index.htm;
        }
    
        location /admin {//二级目录 
            alias vue-admin;
            try_files $uri $uri/ /admin/index.html;
            index index.html index.htm;
        }
    
        location @router {
            rewrite ^.*$ /index.html last;
        }
    
        location /xxx {//跨域代理
            add_header 'Access-Control-Allow-Origin' '*';
            proxy_pass http://ip:port/xxx;
        }
    
        error_page   500 502 503 504  /50x.html;
    
        location = /50x.html {
            root   html;
        }
    }

重新加载nginx配置 `nginx -s reload`

[vue-router]: https://www.cnblogs.com/goloving/p/9147551.html
[9c2ec261cdfed5c3a25f1116d662b889.png]: /images/20210813/28defc5ef3164a7ea65ad724d22c8b18.png
[d0004234de4ea7d8c512012d759fa9ad.png]: /images/20210813/f91066b5d2d24e63ae0bac9e9605b105.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/b64c3634d1d34f0d8d63fbcd45bf5145.png
[11ef1f7d44dc4f80abc42149b3b8dc81.png]: /images/20210813/6c7224074f0d4126b602b111d6345160.png
[HTML5 History]: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
[http_192.168.1.104_8088]: http://192.168.1.104:8088/
[snipaste_20200323_134954.jpg]: /images/20210813/ce2b7e9e0c0245568de365c4350f4cc1.png