為了節(jié)省域名，在同域名下根據(jù)不同路徑前綴用nginx代理多個(gè)Vue項(xiàng)目。

1、修改Vue項(xiàng)目配置

首先修改build/webpack.base.conf.js文件，把publicPath: process.env.NODE_ENV === 'production'改為publicPath: process.env.NODE_ENV === 'production'?'/pc':''，其中/pc是作為一個(gè)項(xiàng)目的前綴，用于區(qū)分。

image.png

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

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

image.png

在terminal中輸入打包命令：npm run build
等一段時(shí)間后會(huì)生成一個(gè)dist文件目錄，打包成功。

2、nginx 配置

nginx下載好，開始配置nginx.conf。
首先隨便定個(gè)域名如：fcx.com，在hosts文件添加127.0.0.1 fcx.com。

image.png

然后把第一步打包的dist復(fù)制到nginx包下的html目錄，然后改名為pc，如圖：

image.png

image.png

再來(lái)配置nginx.conf文件，把server_name改為定好的域名fcx.com，同時(shí)添加一個(gè)location

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

如圖：

image.png

3、啟動(dòng)nginx

cmd進(jìn)入nginx目錄，就是有nginx.exe的目錄，輸入start nginx啟動(dòng)；或者雙擊啟動(dòng)。測(cè)試效果如圖：

image.png

當(dāng)多個(gè)Vue項(xiàng)目時(shí)，和上面的操作一樣，前綴不一樣，這樣就可以同域名下根據(jù)不同的前綴訪問(wèn)不同的項(xiàng)目了。