精华内容
下载资源
问答
  • 主要介绍了nginx部署多个vue项目的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • nginx同时部署多个vue项目

    万次阅读 热门讨论 2019-03-13 14:35:21
    nginx同时部署多个vue项目 项目1路径: 项目2路径: nginx.conf代码如下: #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info...

    nginx同时部署多个vue项目

    在这里插入图片描述
    项目1路径:
    在这里插入图片描述
    项目2路径:
    在这里插入图片描述
    nginx.conf代码如下:

    
    #user  nobody;
    worker_processes  1;
    
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    
    #pid        logs/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
        #                  '$status $body_bytes_sent "$http_referer" '
        #                  '"$http_user_agent" "$http_x_forwarded_for"';
    
        #access_log  logs/access.log  main;
    
        sendfile        on;
        #tcp_nopush     on;
    
        #keepalive_timeout  0;
        keepalive_timeout  65;
    
        #gzip  on;
    
        server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
            location / {
    	root /usr/local/nginx/vue/dist;
                	index index.html;
            }  
    	location /vue-admin-template {
    	    alias /usr/local/nginx/vue-admin-template/dist;
    	    expires  1d;
    	    index index.html;
    	    autoindex on;
            }
    

    部署结果:

    项目1地址:http://127.0.0.1/
    项目2地址:http://127.0.0.1/vue-admin-template/#/login

    展开全文
  • Nginx部署多个Vue项目

    2020-06-30 18:33:56
    Nginx线上部署多个Vue项目(路径区分) nginx 多静态文件部署。 我个人博客项目占用了nginx根路径,而我只有一个域名,也不准备用二级域名了, 所以就直接用路径区分开。 一个域名,只部署一个静态文件服务,那很简单...

    Nginx线上部署多个Vue项目(路径区分)

    nginx 多静态文件部署。
    我个人博客项目占用了nginx根路径,而我只有一个域名,也不准备用二级域名了, 所以就直接用路径区分开。
    一个域名,只部署一个静态文件服务,那很简单,只用把打包后文件放上去就行。
    多个Vue项目主要就是路径问题,静态js文件以及自定义的路由。

    原文请访问 我个人博客地址

    博客地址: https://www.charmcode.cn/article/2020-06-30_nginx_vue

    环境

    • vue 2.6.11
    • vue-router 3.3.1
    • vue-cli 4.4.0

    由于我用的vue-cli 4,所以项目根路径下默认没有 vue.config.js文件, 我在官网看到关于这个vue.config.js是这样描述的.

    有些针对 @vue/cli 的全局配置,例如你惯用的包管理器和你本地保存的 preset,都保存在 home 目录下一个名叫 .vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。
    你也可以使用 vue config 命令来审查或修改全局的 CLI 配置

    添加配置vue.config.js 文件 静态资源路由js,css等路径

    但是 vue config 是全局的配置,我这个项目直接修改这里不合适,于是我就在项目 根路径 下自己手动添加了vue.config.js

    
    // 参考 https://cli.vuejs.org/zh/guide/deployment.html#github-pages
    module.exports = {
        publicPath: process.env.NODE_ENV === 'production'
            ? '/app/mall/'   // /app/mall/ 对应后面`nginx`路径,这里添加的目的是其他静态资源文件统一前缀路径
            : '/',
    };
    

    修改src/router/index.js, 项目页面跳转路由

    const router = new VueRouter({
        base: '/app/mall',   // 主要添加这个 /app/mall 注意这个 和上面的一致,为nginx location路径, 也就是请求路径
        routes,
        mode: 'history'
    });
    
    

    修改 src/config/index.js 项目生产请求地址(非必要)

    非必要,这个地方每个人封装的都不一样,默认会请求 部署的环境地址。

    export let appConfig = {
        development: 'http://127.0.0.1:8010',      // 本地开发 (ps:vue-cli会自动帮我们区分生产开发,npm run serve就是开发,
        production: 'https://www.your_domain.com',  // 生产地址 npm run build 默认为生产
    };
    
    

    然后 我是在src/utils/url.js 文件里面 区分前缀的, 最后在 src/utils/request.js 文件里面使用。

    修改好之后,可以npm run serve看看,区分好之后能否正常访问,是否有改错。
    没有改错可以直接npm run build 生成静态文件

    上传静态文件

    我是通过FillZilla上传静态资源文件

    我是上传到服务器 /data/mall/ 文件夹下, 记住这个文件路径, 后面nginx会指向这里。

    nginx 文件配置

    Centos7 nginx默认配置地址为 /etc/nginx/nginx.conf
    或者有的版本默认引入 /etc/nginx/conf.d/default.conf文件 配置

    
    server {
    
        listen       80;
        server_name  localhost;
    
        #charset koi8-r;
        #access_log  /var/log/nginx/host.access.log  main;
            
        # ...
        location / {
                root   /usr/share/nginx/html;
                index  index.html index.htm;
        }
        
        
        # 添加文件
        # /app/mall 项目访问路径和上面地址对应 
        location /app/mall/ {
            alias /data/mall/;   # 项目存放路径
            try_files $uri $uri/ /app/mall/index.html;  # 内部项目跳转路径
        }
    
    }
    
    

    检测配置是否有语法错误

    nginx -t
    
    

    重新加载配置

    nginx -s reload
    
    

    个人项目部署地址

    线上地址: https://www.charmcode.cn/app/mall/home
    项目Github地址: https://github.com/CoderCharm/Mall/blob/master/DEPLOYMENT.md

    展开全文
  • Nginx同一个端口部署多个vue项目

    千次阅读 2020-08-03 11:42:10
    Nginx同一个端口部署多个vue项目,亲测有效

    先看效果

    app1

    浏览器输入192.168.66.66:10000/app1 访问app1

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    app2

    浏览器输入192.168.66.66:10000/app2 访问app2

    在这里插入图片描述

    配置方法

    
    1. 前台代码更改3个地方
    	- 发网络请求的路径加固定前缀, 如:testurl #注意如果还在开发阶段,需要更改vue.config.js的代理配置
    	- 前端路由base固定前缀路径 app1
    	- 前端项目的虚拟项目名  app1
    	# 注意:路由固定路径和虚拟项目名必须一致
    	
    2. 配置 nginx   网络请求的转发    前台地址重定向
    

    示例1


    1. src\libs\api.request.js 改网络请求统一前缀

    2. vue.config.js 配置开发时代理

    3. src\router\index.js 改路由base固定前缀

    4. vue.config.js 配置前端虚拟项目名


    1. 前台代码更改配置

    1. src\libs\api.request.js 改网络请求统一前缀 testurl
    const baseUrl = '/testurl'
    
    1. vue.config.js 配置开发时代理,保证开发时也能正确访问到后台 testurl
    devServer: {
        proxy: {
          '/testurl/api': {
            target: 'http://10.111.43.12:8090/',
            pathRewrite: { '^/testurl/api': '/' }
          }
        }
      }
    
    1. src\router\index.js 改路由base固定前缀 app1
    Vue.use(Router)
    const router = new Router({
      base: 'app1',
      routes,
      mode: 'history'
    })
    
    1. vue.config.js 配置前端虚拟项目名 /app1/
    const BASE_URL = '/app1/'
    
    publicPath: BASE_URL,
    

    2. nginx 配置

    server {
            listen       10000;
            server_name  localhost;
    
            add_header                  Set-Cookie "HttpOnly";
            add_header                  Set-Cookie "Secure";
            add_header                  X-Frame-Options "SAMEORIGIN";
    
            #此配置可省略,仅仅是为了输入10.111.43.12:10000 时有个默认首页        
            location / {
                root html/;
                index index.htm index.html;
            }
            # 前台页面重定向 ,不能配置root alias ;记得把dist下的内容外移一层
            location ^~ /app1/ {
                try_files $uri $uri/ /app1/dist/index.html;
            }
            location ^~ /app2/ {
                try_files $uri $uri/ /app2/dist/index.html;
            }
    
            # 网络配置转发到网关
            location /cxyxcwdzurl/api/ {
                proxy_pass http://localhost:8090/;
    
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            }
    
        }
    

    3. 服务器前台打包放置路径

    在这里插入图片描述

    html下面建立app1文件夹,将打包好的dist.zip 解压到app1下面

    最最最重要的是:必须把dist目录下的内容拷贝到 app1目录,否则访问报错forbidden

    cd /usr/local/nginx/html/app1
    cp -r dist/*  ./
    

    app2部署方式,和app1类似,触类旁通,聪明的你,肯定已经学会了!

    脚下留心

    我也是摸石头过河,一个一个坑踩过来的,用了最最简陋的配置办法进行配置;

    如有其他优化配置办法,期待您的分享。1206157433@qq.com

    展开全文
  • Nginx部署多个Vue项目,配置不同域名

    一、前言

    • 一个服务器需要部署多个前端项目
      • 比如需要一个企业官网
      • 比如需要一个管理系统
    • 这时候一个Nginx要怎么配置多个前端项目呢
    • 本文详细讲解: 通过不同域名的方式来部署多个项目
      • 访问www.xxx.com到企业官网
      • 访问iot.xxx.com到管理系统

    二、上传dist文件

    • dist是Vue生成的部署文件,上传到云端

    在这里插入图片描述

    三、配置nginx.cnf

    • 企业官网部署view_dist
    • 管理系统部署iot_dist
    • 通过两个server,通过server_name来区分
    vim /usr/local/nginx/conf/nginx.conf
    cd /usr/local/nginx/sbin/
    ./nginx -s reload
    
        server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
            #access_log  logs/host.access.log  main;
    
            
    		location / {
    			root   /root/software/view_dist;
    			try_files $uri $uri/ /index.html;
    			index  index.html index.htm;
    		}
    		
    		location /prod-api/{
    			proxy_set_header Host $http_host;
    			proxy_set_header X-Real-IP $remote_addr;
    			proxy_set_header REMOTE-HOST $remote_addr;
    			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    			proxy_pass http://localhost:8080/;
    		}
            #error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    	
    	server {
            listen       80;
            server_name  iot.xxx.com;
    
            #charset koi8-r;
            #access_log  logs/host.access.log  main;
    
            
    		location / {
    			root   /root/software/iot_dist;
    			try_files $uri $uri/ /index.html;
    			index  index.html index.htm;
    		}
    		
    		location /prod-api/{
    			proxy_set_header Host $http_host;
    			proxy_set_header X-Real-IP $remote_addr;
    			proxy_set_header REMOTE-HOST $remote_addr;
    			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    			proxy_pass http://localhost:8080/;
    		}
            #error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    

    觉得好,就一键三连呗(点赞+收藏+关注)

    展开全文
  • nginx部署多个vue项目,不同端口号下是否连接上云服务器进入nginx文件下进入 nginx.conf 文件并配置第一个项目第一个项目配置第二个项目配置将创建的后缀 `.conf` 引入主后置 `.conf` 中欢迎在评论区交流!...
  • 同一域名下部署多个vue项目

    千次阅读 2020-05-28 17:42:03
    同一域名下部署多个vue项目 问题说明 现在有这么一个需求,有两个 vue 项目, vue1和 vue2 ,如何让 http://www.baidu.com/vue1/作为 vue1 项目的根路径 http://www.baidu.com/vue2/作为 vue2 项目的根路径 ...
  • nginx一个端口部署多个vue项目vue.config.js中publicPath参数配置路由中base参数配置index.html中配置metanginx配置,conf目录下nginx.conf文件 vue.config.js中publicPath参数配置 /** * publicPath参数官方说明: ...
  • Nginx部署多个Vue项目,配置二级域名
  • nginx同一域名下部署多个vue项目

    千次阅读 2019-05-06 15:57:07
    -----------nginx同一域名下部署多个vue项目------------------------ 1.目的 实现nginx服务端同一域名下部署多个vue项目。 2. 实例 pmobile项目: http://mobile.xxxx.cn/pmobile/xxx emobile项目: ...
  • nginx 部署多个vue项目, 静态资源404 1: 路由配置 const RouterConfig = { base: '/aa/', mode: 'history', routes: [ ... ] }; 2: vue.config.js配置 module.exports = { publicPath: '/aa/', devServer: ...
  • nginx部署多个vue项目

    万次阅读 多人点赞 2019-03-18 17:13:19
    上一篇已经介绍了然后配置web项目;今天由于公司需求,需要在同一域名端口下,部署两个项目;今天花了一上午终于弄好了,选择赶紧做一个笔记。 如何连接阿里云服务器就不在这里说了,请看我...准备好两个vue项目 ...
  • 一个域名下部署多个vue项目

    千次阅读 2020-05-02 23:19:56
    现在有这么一需求,有两 vue 项目vue1和 vue2 ,如何让 http://www.baidu.com/vue1/ 作为 vue1 项目的根路径 http://www.baidu.com/vue2/ 作为 vue2 项目的根路径 也就是说两个项目互相不影响? 现在...
  • 用nginx部署多个Vue项目

    千次阅读 2019-08-01 10:16:31
    将准备好的多个项目进行打包;打包后将dist下的index.html和static文件复制到nginx文件下的html中;将第二个项目的打包文件放置在html下新文件下,如:dh; 我在本次中将html原有的两个文件删除掉了;多个项目依次...
  • 由于公司服务器前两天被攻击,阿里云服务器直接把公司服务器给关停了,刚好上面没有什么特别重要的数据,就直接格式化了,之前部署的好几个演示版本项目,是监听多个端口来部署的,本次上级只让开一个端口部署,所以...
  • nginx部署多个vue项目如何配置

    千次阅读 2020-10-22 15:00:02
    使用同一域名或者ip去部署访问多个前端项目,比如域名/ip直接访问官网,域名/ip后面带路径去访问其它项目 一、 最终效果 官网访问地址: http://192.168.27.119/login 项目二访问地址:...
  • 在实际开发过程中,一个项目体系总是包含着多个子项目,由于服务器端口号资源的稀缺,只能考虑能不能通过一个nginx服务器实现多个vue项目部署,共享一个端口了。 网上的针对项目部署的方法主要有三种: 基于域名...
  • 背景:新项目前端部分...两个项目路径分别为127.0.0.1:8080/pc和127.0.0.1/weixin 直接访问http://127.0.0.1:8080/pc/可以跳转,但是访问http://127.0.0.1:8080/pc/home不行 也就是说,用户第一次输入http:...
  • nginx同域名下部署多个vue项目

    千次阅读 2019-07-16 15:16:53
    想要在同一个域名下部署多个前端项目,通过不同url来区分调用相应前端项目。 比如:部署项目a,项目b。想要效果如下。 浏览器输入:http://localhost:8082/a/,展示项目a。 浏览器输入:http://localhost:8082/b/...
  • nginx部署多个vue项目的2种方法

    千次阅读 2020-07-06 15:58:40
    第一种 同一个域名或者ip 相同端口号 部署多个项目 通过斜线访问 http://10.16.xx.23/student/ http://10.16.xx.23 先看这2种配置 查找nginx 和配置文件 whereis nginx 查看配置文件 vim nginx.conf ...
  • 项目配置基于vuecli4 vue.config.js文件配置 module.exports = { publicPath:'/wxPublic/',//需要访问的地址 outputDir:'dist/wxPublic' //编译输出的目录 } 路由配置 //不能使用history模式 会403 const...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,758
精华内容 9,903
关键字:

怎么部署多个vue项目

vue 订阅