Nginx 同域名部署多个Vue Cli 4.0项目记录

1 、首先是vue项目的配置

      vue.config.js(如果没有，需要手动创建)中的配置

module.exports = {

    // 基本路径

    publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/',

    // 输出文件目录

    outputDir: 'dist',

   ......

}

基本路径publicPath中， 生产环境时的/dist/ 是对应nginx访问的域名后的路径的

2、npm run build 后的包放在了Nginx目录得到html文件夹中

目前我的html目录下放了两个包dist和elem

3、Nginx的conf配置

  关于nginx的安装此处忽略，可参照此链接

主要是server节点下的location配置

server {

location /elem/ {
            root   html;
            try_files $uri $uri/ /elem/index.html last;
            
        }
        
        location /dist/ {
            root   html;
            try_files $uri $uri/ /dist/index.html last;
            
        }
        location / {
            root   html;
            try_files $uri $uri/ /index.html last;
            index  index.html index.htm;
        }