vue-cli 打包之后的各种部署问题集中地，这里总能找到你自己的方式。

前端越来越多的人再使用vue,现在也越来越多的前后端的解耦，所以在这个时代种，前端的人员对于的自己的项目部署，要有充分的知道，也知道的一些各种配置和部署，以应对后面的变化，以下的部署方式都是自己通过实现的一些整理方式。

第一种分离式部署

部署到nginx上

在nginx 上部署项目是前端比较常见的，也是比较大众的，市面上大部分都在这上面部署的！下面让我们看下如何在nginx 上配置。

1. 部署在根目录下面，比如你访问的是htpp://127.0.0.1、htpp://127.0.0.1:8080、htpp://www..，这种方式比较常见，也是不容出错的一种方式，下面我以8080为列，详细配置如下：

# nginx的安装目录写下的conf文件下面的nginx.conf
....
    server {
        listen       8080;
        server_name  localhost;

        #前端映射部署
        location / {
            root   E:/www/test/dist;
            index  index.html;
            try_files $uri $uri/ /index.html;
        }
        ....
    }
...

重新加载nginx 配置

$ nginx.exe -s reload

效果如下：

tips:这里的 try_files $uri $uri/ /index.html 是什么呢?有什么作用呢？ 比如我们访问http://127.0.0.1/about， 那么try_files 会到硬盘里尝试找这个文件,如果存在名为 /$root/about （$root 是我们发布项目代码的存放目录）的文件，就直接把这个文件的内容发送给用户。如果，在目录中没有叫 about 的文件的话，nginx就会看 $uri/(就是看有没有名为 /$root/about/ 的目录) 如果再找不到，就会 fall back 到 try_files 的最后一个选项 /index.html，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://127.0.0.1/index.html。这样再history刷新就不会出现404或者空白页面

1. 部署到非跟目录下，比如你访问的是htpp://127.0.0.1/test、htpp://127.0.0.1:8080/test、htpp://www../test，这种方式比较常见，页面我们可以部署到统一的域名下面，这种情况下，打包方式和配置有所改变。

下面我以vue-cli为列，打包配置如下：再vue.config.js如下

/* 这里我部署到test下，所以我的包名叫test*/
....
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/test/'
    : '/',
    ......
}
....

下面我以8080为列，详细配置如下：

# nginx的安装目录写下的conf文件下面的nginx.conf
....
    server {
        listen       8080;
        server_name  localhost;

        #前端映射部署
        location /test {
            alias   E:/www/test/dist;
            index  index.html;
            try_files $uri $uri/ /test/index.html;
        }
        ....
    }
...

重新加载nginx 配置

$ nginx.exe -s reload

tips:nginx指定文件路径有两种方式root和alias,他们两个的区别在于指令的使用方法和作用域,先看使用的区别 [root] 语法：root path 默认值：root html 配置段：http、server、location、if [alias] 语法：alias path 配置段：location 而在在于nginx如何解释location后面的uri，这会使两者分别以不同的方式将请求映射到服务器文件上： root的处理结果是：root路径＋location路径 alias的处理结果是：使用alias路径替换location路径,但是目录名后面一定要加"/" alias是一个目录别名的定义，root则是最上层目录的定义。

部署到apache-tomcat上

在apache-tomcat 上部署项目是前端比较常见的，也是比较大众的，市面上大部分都在这上面部署的！下面让我们看下如何在apache-tomcat 上配置。

1. 部署在根目录下面，比如你访问的是htpp://127.0.0.1、htpp://127.0.0.1:8080、htpp://www..，这种方式比较常见，直接放在webapps文件下，也是不容出错的一种方式，下面我以8080为列，详细配置如下：

把打包的文件放在webapps文件夹下ROOT(没有新建一个)文件，把打包的dist下的文件弄到ROOT下 修改配置文件E:\sp\apache-tomcat-10.0.0-M10\conf下的web.xml

</web-app>
.....
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
    </welcome-file-list>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>

</web-app>

重启使配置生效

E:\sp\apache-tomcat-10.0.0-M10\bin>  shutdown
E:\sp\apache-tomcat-10.0.0-M10\bin>  startup

1. 部署到非跟目录下，比如你访问的是htpp://127.0.0.1/test、htpp://127.0.0.1:8080/test、htpp://www../test，这种方式比较常见，页面我们可以部署到统一的域名下面，这种情况下，打包方式和配置有所改变。

下面我以vue-cli为列，打包配置如下：再vue.config.js如下

/* 这里我部署到test下，所以我的包名叫test*/
....
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/test/'
    : '/',
    ......
}
....

修改配置文件E:\sp\apache-tomcat-10.0.0-M10\conf下的serve.xml

<?xml version="1.0" encoding="UTF-8"?>
<Server port="8005" shutdown="SHUTDOWN">
....
<Service name="Catalina">
    <Engine name="Catalina" defaultHost="localhost">
      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">
            ...
          <Context docBase="E:\www\test\dist" path="/test" reloadable="false" />
            ...
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />

      </Host>
    </Engine>
  </Service>
</Server>

在E:\www\test\dist下的新建配置文件WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
                      https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
  version="5.0">
  <display-name>test</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

重启使配置生效

E:\sp\apache-tomcat-10.0.0-M10\bin>  shutdown
E:\sp\apache-tomcat-10.0.0-M10\bin>  startup

部署iis上

iis上部署常见于.net项目，iis是windows 平台下得一个web服务器，具体安装，这里不在介绍，就看下如何在iis 上部署vue得项目。

1. 部署在根目录下面，比如你访问的是htpp://127.0.0.1、htpp://127.0.0.1:8081、htpp://www..，这种方式比较常见，也是不容出错的一种方式，下面我以8081为列，详细配置如下：

a). 打开iis 管理界面

b). 配置站点。我这边以默认得站点位列，直接映射到打包得路径

c). 配置URL重写

在dist新建web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
 <staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff2" mimeType="font/x-woff2" />
  <remove fileExtension=".ttf" />
  <mimeMap fileExtension=".ttf" mimeType="font/x-ttf" />
  <remove fileExtension=".json" />
  <mimeMap fileExtension=".json" mimeType="text/json" />
 </staticContent>
 <rewrite>
  <rules>
    <rule name="CHRoutes" stopProcessing="true">
    <match url=".*" />
    <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    </conditions>
    <action type="Rewrite" url="/index.html" />
    </rule>
  </rules>
 </rewrite>
 </system.webServer>
</configuration>

设置url-rewrite: 安装url-rewrite 重启iiS

1. 部署到非跟目录下，比如你访问的是htpp://127.0.0.1/test、htpp://127.0.0.1:8081/test、htpp://www../test，这种方式比较常见，页面我们可以部署到统一的域名下面，这种情况下，打包方式和配置有所改变。

下面我以vue-cli为列，打包配置如下：再vue.config.js如下

/* 这里我部署到test下，所以我的包名叫test*/
....
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/test/'
    : '/',
    ......
}
....

接下来得配置跟第一种一样得步骤，唯一得缺点在映射上有所变化

重启iis

第二种不分离式部署

我们都知道，前端项目构建出来的就是一个静态资源，所以只要把我们想项目，放到静态后端的静态资源下就行拉！

java的项目比较多，但是基本大部分项目都是用spring boot 来开发的然后继承各种各样的插件，形成一个大的项目，所以下面这个项目工程为例，其他的项目也都是一样的，就是部署的核心问题，而我们只要解决核心问题就行拉！然而解决核心问题主要是2种处理的方式，无论哪一种方式，只是一个代理转发问题！更新详细的文档请看Vue-cli项目打包部署到sping boot 方案研究

第一种处理方式，前端处理

因为我们都知道，前端项目也有我们自己的路由，由于浏览器的机制的问题，我们都知道，访问一个url 都要经过后端，所以我们现在要做的就是，可以经过后端，但是后端不做处理，直接代理转发给前端，由前端处理就行拉！而这样的关键点，前端和后端协商好，给前端做个路由标识，只有碰到这样标识，直接过滤调，转发给前端自己处理就行了！比如：对vue的路由的路径做rewrite，交给router来处理，而不是spring boot自己处理，rewrite时可以考虑路由的路径统一增加后缀，然后在spring boot中编写过滤拦截特定后缀来做请求转发交给vue的路由处理。前端路增加fe，

第二种处理方式，后端处理

其实跟第一种一样，就是这个标识由后端来加就行拉，主要区分出来哪些是前端的，哪些是后端的的就行拉