vue-cli中设置publicPath：一个nginx部署多个项目时使用

本文主要是介绍vue-cli中设置publicPath：一个nginx部署多个项目时使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

执行npm run build打包后，生成的dist文件如下：

1、当设置publicPath为/时

修改vue.config.js文件

module.exports = {
    publicPath: '/',
    configureWebpack: {
        resolve: {
          //设置别名
          alias: {
            'assets': '@/assets',
            'components': '@/components',
            'views': '@/views',
            'store': '@/store',
            'utils':'@/utils',
            'api':'@/api',
          }
        }
    },
    devServer: {
        port: 9628,
    },
    lintOnSave: false
}

在vue项目根目录中使用命令npm run build创建输出文件，将dist文件夹下的所有内容复制到nginx目录下的webapp/内（没有的话自行创建）。

项目部署到nginx中，nginx配置如下：

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;



    sendfile        on;

    keepalive_timeout  65;
    upstream pts{
        server localhost:8081;  
    }

    server {
        listen       8880;
        server_name  localhost;


        location / {
            root   webapp;
            index  index.html index.htm;
        }
        location ~^/api/ {
            proxy_pass http://pts;  
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

将后台部署到tomcat并启动，将前端部署到nginx并启动

部署后请求路径

http://localhost:8880/css/app.788b254a.css

效果如下：

2、当设置publicPath的值为/vue1时

 修改vue.config.js文件

module.exports = {
    publicPath: '/vue1/',
    configureWebpack: {
        resolve: {
          //设置别名
          alias: {
            'assets': '@/assets',
            'components': '@/components',
            'views': '@/views',
            'store': '@/store',
            'utils':'@/utils',
            'api':'@/api',
          }
        }
    },
    devServer: {
        port: 9628,
    },
    lintOnSave: false
}

分别在vue项目根目录中使用命令npm run build创建输出文件，将dist文件夹下的所有内容复制到nginx目录下的webapp/vue1内（没有的话自行创建）。

项目部署到nginx中，nginx配置如下：

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;



    sendfile        on;

    keepalive_timeout  65;
    upstream pts{
        server localhost:8081;  
    }

    server {
        listen       8880;
        server_name  localhost;


        location /vue1 {
            root   webapp;
            index  index.html index.htm;
        }
        location ~^/api/ {
            proxy_pass http://pts;  
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

将后台部署到tomcat并启动，将前端部署到nginx并启动

部署后请求路径

http://localhost:8880/vue1/css/app.788b254a.css

效果如下

注意：加上publicPath的原因是：有时一个Nginx中放了好几个子项目，需要将不同的项目通过不同的路径来访问。

对于项目1而言，修改vue.config.js文件的publicPath：

publicPath: '/vue1/'

对于项目2而言，修改vue.config.js文件的publicPath：

publicPath: '/vue2/'

分别在vue项目根目录中使用命令npm run build创建输出文件，将dist文件夹下的所有内容复制到nginx目录下的webapp/vue1和webapp/vue2内（没有的话自行创建）。

修改nginx目录中的conf/nginx.conf文件，在 http -> server 节点中，修改location节的内容：

location /vue1 {
    root   webapp;
    index  index.html index.htm;
}

location /vue2 {
    root   webapp;
    index  index.html index.htm;
}

在nginx根目录使用命令nginx -s reload即可在浏览器中通过http://localhost/vue1、http://localhost/vue2访问项目1、项目2。

这篇关于vue-cli中设置publicPath：一个nginx部署多个项目时使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！