精华内容
下载资源
问答
  • 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项目

    万次阅读 热门讨论 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项目,需要进行一下修改。

    1. 首先在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>
    
    1. 在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项目的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 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 1: 路由配置 const RouterConfig = { base: '/aa/', mode: 'history', routes: [ ... ] }; 2: vue.config.js配置 module.exports = { publicPath: '/aa/', devServer: ...
  • 使用同一域名或者ip去部署访问多个前端项目,比如域名/ip直接访问官网,域名/ip后面带路径去访问其它项目 一、 最终效果 官网访问地址: http://192.168.27.119/login 项目二访问地址:...
  • 先熟悉一下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以windows版为例,下载niginx...nginx常用命令如下:部署项目到Nginx根目录对于vue-cli创建的项目,修改vue.config.js文件(位于项目根目录下,没有的话自行创建)在vue项目根目录中使...
  • 先熟悉一下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的配...
  • 项目中使用了nginx,但是需要分项目在同一个服务器测试,建立多个项目配置,这里分vue-cli 2.x和3.x vue-cli 2.x 工程中有 3 个地方要设置(假设配置在gentle-vue,这个目录下) config目录 --> index.js --&...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 333
精华内容 133
关键字:

nginx部署多个vue项目

vue 订阅