nginx根据前缀代理多个Vue项目

为了节省域名，在同域名下根据不同路径前缀用nginx代理多个Vue项目。

1、修改Vue项目配置

首先修改build/webpack.base.conf.js文件，把publicPath: process.env.NODE_ENV === 'production'改为publicPath: process.env.NODE_ENV === 'production'?'/pc':''，其中/pc是作为一个项目的前缀，用于区分。

image.png

然后修改src/router/index.js文件，在Router中加上

  mode: 'history',
  base: '/pc/',

image.png

在terminal中输入打包命令：npm run build
等一段时间后会生成一个dist文件目录，打包成功。

2、nginx 配置

nginx下载好，开始配置nginx.conf。
首先随便定个域名如：fcx.com，在hosts文件添加127.0.0.1 fcx.com。

image.png

然后把第一步打包的dist复制到nginx包下的html目录，然后改名为pc，如图：

image.png

image.png

再来配置nginx.conf文件，把server_name改为定好的域名fcx.com，同时添加一个location

location ^~ /pc {
      try_files $uri $uri/ /pc/index.html;
}

如图：

image.png

3、启动nginx

cmd进入nginx目录，就是有nginx.exe的目录，输入start nginx启动；或者双击启动。测试效果如图：

image.png

当多个Vue项目时，和上面的操作一样，前缀不一样，这样就可以同域名下根据不同的前缀访问不同的项目了。