vue项目部署（vue-cli3.x,nginx,同域名多工程）

提要：vue-router 有两种模式，
1、默认是hash模式，通过URL的hash来模拟URL。
2、另一种history模式，它是利用history.pushStateAPI来模拟URL。
只不过这次我选择history最主要的原因是：hash模式分享链接后有挺多坑。

1、再BB下

首先我们先提一下官方给予我们在History模式下服务器部署的帮助

location / {
  try_files $uri $uri/ /index.html;
}

简单采用他人的解释：

uri时，如果存在，则访问$uri/, 不存在就访问/index.html 这样配置好，访问http://example.com/时就可以访问到网站了，进入多级目录后刷新页面也不会存在问题。

2、修改VUE配置文件（正式开始）

因为我们同一个域名下有多个工程项目，所以我们是采用非根目录下访问的情况，所以我们需要修改VUE配置文件。

vue-cli3.X :
1、在vue.config.js的文件中加入（此处为了打包后的JS,CSS等文件的路径引向）

module.exports = {
  baseUrl:'/tool/'  //根据www.xxx.com/后面的路径写入（比如www.xxx.com/tool）
}

官方给出的解释是：

image.png

2、改变vue项目中的路由配置，

const router = new Router({
 mode: "history",
 base:'/tool/',
 //....其他无影响省略

3、OK，VUE需要解决的事情搞定（改变webpack output.publicPath,改变路由base）

3、nginx配置

此处不教程nginx安装之类，只记录和此次项目有关的简单部署配置，如果需要从0开始可以查看我另外一篇记录
咳咳：性子急的可以直接看最下面配置

1、老样子一步一步来，我们需要根据官方提供的简单修正下代码

location / {
  try_files $uri $uri/ /index.html;
}

改为：(注意下，我现在都是以/tool来记录)

  location /tool { 
        try_files $uri $uri/ /tool/index.html;
   }

2、我们先看一下同域下多工程项目的结构：

server {
    listen   80;        #端口  
    server_name  xxxx.com;
    root /var/html;
    location /{
      ... #xxxx.com
    }
    location /tool { 
      ... #对应的访问地址 xxxx.com/tool
    }
    location /community { 
      ... #  xxxx.com/community
    }
}

OK,这样的结构穿插我们的东东

server {
    listen   80;        #端口  
    server_name  xxxx.com;
    root /var/html;
    location /{
    }
    location /tool { 
      index index.html;
      try_files $uri $uri/ /tool/index.html;
    }
    location /community { 
      index index.html;
      try_files $uri $uri/ /community/index.html;
    }
}

题外话：
网上还有alias的路径指向，root和alias的区别在于（个人理解，出错希望点出）：
location /file/{
alias /var/html/file; #这个查找文件的路径直接是/var/html/file
}
location /file/{
root /var/html/file; #这个查找文件的路径应该是/var/html/file/file
#所以应该为 root /var/html;因此之后的配置我将其放置在全局中
}

3、这一步其实看情况选择，一般是不会有啥问题，但有些会遇见JS,CSS等文件引入出错，解决办法是

    location  ~ .*\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt)$
    {
      root /var/html;
      proxy_temp_path /var/html;
    }

4、好的，最终的配置文件是：

server {
    listen   80;        #端口  
    server_name  xxxx.com;
    root /var/html;
    location /{
    }
    location /tool { 
      index index.html;
      try_files $uri $uri/ /tool/index.html;
    }
    location /community {  
      index index.html;
      try_files $uri $uri/ /community/index.html;
    }
    location  ~ .*\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt)$
    {
      root /var/html;
      proxy_temp_path /var/html;
    }
}

好的，将其保存上传，并将打包好的文件直接丢入对应的tool或者community，然后访问xxxx.com/tool或者/community

4、最后就是nginx修改配置一定要重启！！

nginx -t
nginx -s reload
//如果这个代码不行可以自行谷歌百度下命令行