為了節(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)目了罗售。
