vue 同ip不同路由地址配置

1、静态资源地址配置

这里要分vuecli2和vuecli3两种环境，只讲vuecli3的，与vuecli2不同的地方我提下位置你就可以自己找了。

在vue.config.js文件下找到publicPath配置，添加如下配置（vuecli2就是config文件夹下的assetsPublicPath配置）


process.env.NODE_ENV==='production'?'/newProject/':'/',

这个配置在官方文档上有说明，就是要注意区分开发环境与生产部署环境。生产环境上我们跑起项目时是不需要在url上加上这个newProject的，加上这个，是因为后面部署的时候nginx会根据这个来区分不同的项目。

2、在模板文件下添加base

在部署环境下， a、img、link、form这些标签要找到对应资源，也要先匹配nginx环境，所以要在head节点下加上base配置。


<metabase=/newProject/>

base标签为页面上的所有链接规定默认地址或默认目标。

打包之后，你的html页面看起来就是这样：


<!DOCTYPE html>
<html>
<head>
<scriptsrc="/newProject/js/runtime~index.0604ac2d.js"></script><metacharset="utf-8">
<metabase="/newProject/">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,edge">
<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<linkrel="icon"href="/newProject/images/favicon.ico">
<scriptsrc="/newProject/xxx.js"></script>
<title></title>
</head>

3、将’/newProject/'应用到vue项目路由中

这一步就是将vue项目中的页面路由切换加上这个添加的url路径，在router的初始化步骤下添加：


const router = new VueRouter({
  mode:'history',base:process.env.NODE_ENV==='production'?'/newProject/index/':'/index/',routes
})

如果你的项目单页面服务在/index/下，一般默认情况下vuex的基路径base配置默认是’/index/’。这里的配置同样是根据环境来区分，部署环境同样要加上’/newProject’。

2、nginx配置

这个没写步骤，直接看完整配置吧。‘location /’ 和’location /newProject’这两块就是我说的两个应用，大概意思就是这两个应用要共用20000这个端口（'location ^~ /api/ '这个是接口api映射配置点，本文不讨论，你可以忽略）。


server{
  listen20000;
  server_name  localhost;# rootD:/deploy/web
  location^~/api/{
    proxy_pass http://ip:端口/;
  }
  location/{
    rootD:/deploy/web/a;
    try_files $uri $uri/@router;
    index index.html;
  }
  location/newProject{
    aliasD:/deploy/web/newProject;
    try_files $uri $uri//newProject/index.html;
    index  index.html;
  }
  location @router{
    rewrite^.*$/index.html last;
  }
}

配置基本就是这样，可以结合自己项目参考下，直接copy修改下就行。

我简单介绍下要点：

a、D:/deploy/web下的a、newProject项目分别在不同的文件夹里，它们所在位置不重要，重要的是nginx可以找到并且发布出来。

b、a文件夹的地址前缀是root，newProject文件夹的地址前缀是alias。

c、try_files后面的内容也不一样，自己注意看，我不细说了。

敲黑板，划重点

1、root、alias

root与alias主要作用就是解释location后面的uri，root意思就是根据root路径+locationn路径找到资源；alias意思就是用alias路径替换对应的location路径内容。

2、try_files $uri$ uri/

可能不懂nginx的人有点懵，有人会问try_files $uri$ uri/ @router; 这句话是什么意思？我简单解释下：

try_files字面意思就是尝试文件，再结合语境就是“尝试读取文件”，这里就是要读取静态文件

$uri 这个是nginx的一个变量，存放着用户访问的地址,

比如：http://www.aa.com/index.html, 那么$uri就是 /index.html

u r i / 表示 u r l 的目录，比如： h t t p : / / w w w . a a . c o m / n g i n x / t e s t / ，那么 uri/ 表示url的目录，比如：http://www.aa.com/nginx/test/ ，那么uri/表示url的目录，比如：http://www.aa.com/nginx/test/，那么uri/就是 /nginx/test/

完整的解释就是：try_files 去尝试到网站目录读取用户访问的文件，如果第一个变量存在，就直接返回当前值；如果第一个不存在继续读取第二个变量，如果存在，返回当前值；如果不存在就跳转到第三个参数上。

现在来看看第三个参数：@router，这个参数叫location，配置的是rewrite，重写规则。比如上面的rewrite ^.*$ /index.html last; ，这句意思就是一个重定向。比如你是这个地址http://www.baidu.com/xxx.html，它会跳转到http://www.baidu.com/index.html/xxx.html