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

最新推荐文章于 2024-12-13 10:26:47 发布

原创最新推荐文章于 2024-12-13 10:26:47 发布 · 416 阅读

1 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何配置Vue项目以适应不同的环境，并通过Nginx实现静态资源的正确路由。涵盖了vue.config.js的设置，包括publicPath和outputDir选项，以及Nginx的location配置，确保多个Vue应用在同一服务器上共存。

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;
        }