nginx部署多个vue项目

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是这样描述的.

参考官网说明https://cli.vuejs.org/zh/config/:

有些针对 @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项目

万次阅读 热门讨论 2019-03-18 17:13:19

上一篇已经介绍了然后配置web项目；今天由于公司需求，需要在同一域名端口下，部署两个项目；今天花了一上午终于弄好了，选择赶紧做一个笔记。如何连接阿里云服务器就不在这里说了，请看我...准备好两个vue的项目 ...

上一篇已经介绍了然后配置web项目；今天由于公司需求，需要在同一域名端口下，部署两个项目；今天花了一上午终于弄好了，选择赶紧做一个笔记。
如何连接阿里云服务器就不在这里说了，请看我以前的文章。
首先需要的效果

http://47.97.244.83/login

http://47.97.244.83/student/login

文件目录



两个项目并列在同一文件夹内。

准备好两个vue的项目
http://47.97.244.83/login：这个不用修改配置直接build就可以。关键是二级域名的vue项目，需要进行一下修改。

首先在config文件夹内的index.js内修改(注意是build内)

		// nginx 配置
       assetsPublicPath: '/student/',



这样确保生产出来的文件，在index.html中都是在student下。



2. index.html文件修改

添加 <meta base=/student/ >

最后build的index.html文件如下：
<!DOCTYPE html>
<html>
<head>
	<meta base=/student/ >
	<meta charset=utf-8>
	<meta http-equiv=X-UA-Compatible content="IE=edge">
	<meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=./favicon.ico>
	<title>砺行教育管理系统</title>
	<link href=/student/static/css/app.26c5efbf7403094b0b351615f215dca8.css rel=stylesheet>
</head>
<body>
	<noscript><strong>对比起程序报错了</strong></noscript>
	<div id=app></div>
	<script type=text/javascript src=/student/static/js/manifest.c07ff685ddc74bf39577.js></script>
	<script type=text/javascript src=/student/static/js/vendor.63945df20397482ff39e.js></script>
	<script type=text/javascript src=/student/static/js/app.39f0baab8f580b8d4bc2.js></script>
</body>
</html>


在src/router/index.js文件修改

添加 base: ‘/student/’,



Nginx配置修改
server {
        listen       80;
        server_name  localhost;
		# root   /usr/local/sixiucheng/codes;
        location / {
            root   /usr/local/sixiucheng/codes/dist;
           
	    try_files $uri $uri/ @router;
            index  index.html index.htm;
        }

		location /student { 
		alias   /usr/local/sixiucheng/codes/student/;
	    try_files $uri $uri/ /student/index.html;
            index  index.html index.htm;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

注意这里的root



一个是全局的一个单个引入，这里需要注意一下当注释掉全局的root时候，需要在二级配置下将root改为alias；如下图



所以此时的配置为


最后一定要注意重启！！！
nginx -s reload

注意：如果80端口失败

1.检查下nginx配置，使用nginx -t 看看有无错误信息

2.检查本地防火墙是否开启80

3.如果是云主机，检查安全组是否开放80权限。

题外话

01…刚开始将alias写成root,导致html页面中的css和js一直404；后来百度到加下面一句话，就可以解决问题；但是这样会将所有的js，css引入的位置修改。这里注意一下。
# 解决css，js引入失败
		 location  ~ .*\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt)$ 
		 		{
		 			root /usr/local/sixiucheng/codes;
		 			proxy_temp_path /usr/local/sixiucheng/codes;
		 		}

02…网上还有alias的路径指向，root和alias的区别在于（个人理解，出错希望点出）：
location /file/{
alias /var/html/file; #这个查找文件的路径直接是/var/html/file
}
location /file/{
root /var/html/file; #这个查找文件的路径应该是/var/html/file/file
}

收起

展开全文

nginx部署多个 vue项目

2020-01-10 11:06:06

将vue打包项目上传到服务器如下图第二步配置nginx分2个端口配置 server { listen 8080; server_name 你的域名; index index.html index.htm index.php; root /www/wwwroot/dist/; ...

 第一步

将vue打包项目上传到服务器如下图 



第二步

配置nginx分2个端口配置

server
    {
        listen 8080;
        server_name    你的域名;
        index index.html index.htm index.php;
         root /www/wwwroot/dist/;
     
         #error_page   404   /404.html;
        include enable-php.conf;
        
        
  location /web {   
           alias  /www/wwwroot/dist/;
            try_files $uri $uri/ /index.html;     
            }
        
        
        
        
       
        
        
 location   /api{
            proxy_pass  你的域名:3000;
            add_header Content-Type "text/plain;charset=utf-8";
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST';
        }
        
         
        
        
        
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /\.
        {
            deny all;
        }

        access_log  /www/wwwlogs/access.log;
    }
    
    
    
    
    
    server
    {
        listen 8081;
        server_name   你的域名;
        index index.html index.htm index.php;
         root /www/wwwroot/tasks/;
     
         #error_page   404   /404.html;
        include enable-php.conf;
        
        
  location /app {   
           alias  /www/wwwroot/tasks/;
            try_files $uri $uri/ /index.html;     
            }
        
        
        
        
       
        
        
 location   /api{
            proxy_pass  你的域名:8000;
            add_header Content-Type "text/plain;charset=utf-8";
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST';
        }
        
         
        
        
        
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /\.
        {
            deny all;
        }

        access_log  /www/wwwlogs/access.log;
    }
    
    
    
    
    
    
include /www/server/panel/vhost/nginx/*.conf;
}

收起

展开全文

nginx部署多个vue项目的方法示例
2020-10-14 19:52:54
主要介绍了nginx部署多个vue项目的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
收起

用nginx部署多个Vue项目

2020-05-14 10:35:28

nginx部署多个Vue项目 1.准备好两个项目 2.第一个项目打包好上传到服务器上 3.第二个项目需要配置一下在上传服务器 3.1首先在config文件夹内的index.js内修改(注意是build内) // nginx 配置 assetsPublicPath: '/...

nginx部署多个Vue项目

1.准备好两个项目

在这里插入图片描述

2.第一个项目打包好上传到服务器上

3.第二个项目需要配置一下在上传服务器

3.1首先在config文件夹内的index.js内修改(注意是build内)

// nginx 配置
       assetsPublicPath: '/apphoutai/', (这里apphoutai是可以随意命名的)

在这里插入图片描述

3.2在src/router/index.js文件修改
添加 base: ‘/apphoutai/’,

在这里插入图片描述

3.4 上传服务器并把两个项目分别放在两个新建的文件夹下，注意第二个项目的文件夹需要和3.1和3.2配置的名字一样

1 2分别指项目1和项目2
在这里插入图片描述

3.4Nginx配置修改

server {
        listen       80;
        server_name  localhost;
		# root   /usr/local/sixiucheng/codes;
		#这是第一个vue项目 配置
        location / {
            root   /usr/local/sixiucheng/codes/dist;
           
	    try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
		
		#这是第二个vue项目配置
		location /student { 
		#这里特别注意 不是root 而是 alias
		alias   /usr/local/sixiucheng/codes/student/;
	    try_files $uri $uri/ /student/index.html;
            index  index.html index.htm;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

root和alias的区别在于

location /file/{
alias /var/html/file; #这个查找文件的路径直接是/var/html/file
}
location /file/{
root /var/html/file; #这个查找文件的路径应该是/var/html/file/file
}

收起

展开全文

nginx 部署多个vue项目, 静态资源404
2020-07-30 13:19:25
nginx 部署多个vue项目, 静态资源404 1: 路由配置 const RouterConfig = { base: '/aa/', mode: 'history', routes: [ ... ] }; 2: vue.config.js配置 module.exports = { publicPath: '/aa/', devServer: ...
收起
nginx部署多个vue项目如何配置
2020-10-22 15:00:02
使用同一域名或者ip去部署访问多个前端项目，比如域名/ip直接访问官网，域名/ip后面带路径去访问其它项目一、最终效果官网访问地址: http://192.168.27.119/login 项目二访问地址：...
收起
前端 javascript
多个nginx集群部署_NGINX 部署多个VUE项目（测试环境）
2021-01-27 15:49:44
先熟悉一下nginx命查看nginx进程是否启动：ps -ef | grep nginx进入安装目录中(配置环境变量后，无需再输入./)命令：cd /usr/local/nginx/sbin./nginx 启动 ./nginx -s stop 关闭 ./nginx -s reload 重启=====>...
收起
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 ...
收起
nginx部署多个vue项目_H5大咖分享：3分钟让你学会前端项目部署到nginx
2020-12-05 20:28:31
学前端来云和数据。下载Nginx以windows版为例，下载niginx...nginx常用命令如下：部署项目到Nginx根目录对于vue-cli创建的项目，修改vue.config.js文件（位于项目根目录下，没有的话自行创建）在vue项目根目录中使...
收起
nginx root目录_NGINX 部署多个VUE项目（测试环境）
2020-12-23 05:50:07
先熟悉一下nginx命查看nginx进程是否启动：ps -ef | grep nginx进入安装目录中(配置环境变量后，无需再输入./)命令：cd /usr/local/nginx/sbin./nginx 启动 ./nginx -s stop 关闭 ./nginx -s reload 重启=====>...
收起
nginx部署多个vue项目 分vue-cli2.x和3.x
千次阅读 2019-07-16 16:23:23
1.vue-cli3.x 在根目录下找到"vue.config.js" 更改publicPath: '/portal/' 的 portal 为你自己的项目名，记得前后的"/" 2.vue-cli2.x 找到config/index.js文件找到"build"部分 ...3.nginx的配...
收起
三, Vue のvue-cli 2.x和3.x 在nginx部署多个vue项目
2020-03-05 16:58:43
项目中使用了nginx，但是需要分项目在同一个服务器测试，建立多个项目配置，这里分vue-cli 2.x和3.x vue-cli 2.x 工程中有 3 个地方要设置(假设配置在gentle-vue,这个目录下) config目录 --> index.js --&...
收起

Nginx部署多个Vue项目

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

环境

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

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

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

上传静态文件

nginx 文件配置

个人项目部署地址

nginx部署多个vue项目

如何连接阿里云服务器就不在这里说了，请看我以前的文章。

首先需要的效果

准备好两个vue的项目

Nginx配置修改

最后一定要注意重启！！！

注意：如果80端口失败

nginx部署多个 vue项目

第一步

第二步

nginx部署多个vue项目的方法示例

用nginx部署多个Vue项目

nginx部署多个Vue项目

1.准备好两个项目

2.第一个项目打包好上传到服务器上

3.第二个项目需要配置一下在上传服务器

nginx 部署多个vue项目, 静态资源404

nginx部署多个vue项目如何配置

多个nginx集群部署_NGINX 部署多个VUE项目（测试环境）

nginx部署多个vue项目的2种方法

nginx部署多个vue项目_H5大咖分享：3分钟让你学会前端项目部署到nginx

nginx root目录_NGINX 部署多个VUE项目（测试环境）

nginx部署多个vue项目分vue-cli2.x和3.x

三, Vue のvue-cli 2.x和3.x 在nginx部署多个vue项目

nginx部署多个vue项目

Nginx部署多个Vue项目

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

环境

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

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

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

上传静态文件

nginx 文件配置

个人项目部署地址

nginx部署多个vue项目

如何连接阿里云服务器就不在这里说了，请看我以前的文章。

首先需要的效果

准备好两个vue的项目

Nginx配置修改

最后一定要注意重启！！！

注意：如果80端口失败

nginx部署多个 vue项目

第一步

第二步

nginx部署多个vue项目的方法示例

用nginx部署多个Vue项目

nginx部署多个Vue项目

1.准备好两个项目

2.第一个项目打包好上传到服务器上

3.第二个项目需要配置一下在上传服务器

nginx 部署多个vue项目, 静态资源404

nginx部署多个vue项目如何配置

多个nginx集群部署_NGINX 部署多个VUE项目（测试环境）

nginx部署多个vue项目的2种方法

nginx部署多个vue项目_H5大咖分享：3分钟让你学会前端项目部署到nginx

nginx root目录_NGINX 部署多个VUE项目（测试环境）

nginx部署多个vue项目 分vue-cli2.x和3.x

三, Vue のvue-cli 2.x和3.x 在nginx部署多个vue项目

nginx部署多个vue项目

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

nginx部署多个vue项目分vue-cli2.x和3.x