精华内容
下载资源
问答
  • 前戏假设你这边已经写好了一个vue项目,并且本地运行也是没有问题的,现在我们就可以部署到服务器上了,我们使用nginx进行部署Nginx 是一个高性能的 Web 和反向代理服务器, 它具有有很非常优越的特性:作为 Web ...

    前戏

    假设你这边已经写好了一个vue的项目,并且本地运行也是没有问题的,现在我们就可以部署到服务器上了,我们使用nginx进行部署

    Nginx 是一个高性能的 Web 和反向代理服务器, 它具有有很多非常优越的特性:

    作为 Web 服务器:相比 Apache,Nginx 使用更少的资源,支持更多的并发连接,体现更高的效率,这点使Nginx 尤其受到虚拟主机提供商的欢迎。能够支持高达 50,000 个并发连接数的响应. 更好的处理静态文件Nginx 安装非常的简单,配置文件 非常简洁,Bug非常少的服务器: Nginx 启动特别容易,并且几乎可以做到7*24不间断运行,即使运行数个月也不需要重新启动

    这是我开发的项目目录结构

    打包

    在项目根目录下,执行打包命令

    npm run build

    打包完成会在项目根目录下生成一个dist的目录,我们可以命名为zz-mms

    打包完成之后把zz-mms上传到服务器

    我是上传在/opt目录下

    安装启动nginx,如何安装和启动,请移驾我nginx的博客

    打开nginx的配置文件进行修改

    [root@HH conf]#vim /opt/nginx1-16/conf/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_connections1024;

    }

    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 {

    listen80;

    server_name localhost;#charset koi8-r;

    #access_log logs/host.access.log main;

    location/{

    root/opt/zz-mms;

    try_files $uri $uri/ /index.html; # 解决刷新报404的问题

    index index.html index.htm;

    }

    location/pro-api{ # 解决跨域问题

    proxy_pass http://mengxuegu.com:7300/mock/5db437d92aa750460d4fce18;

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

    }#proxy the PHP scripts to Apache listening on 127.0.0.1:80

    # #location ~ \.php$ {

    #proxy_pass http://127.0.0.1;

    #}

    #pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

    # #location ~ \.php$ {

    #root html;

    #fastcgi_pass 127.0.0.1:9000;

    #fastcgi_index index.php;

    #fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;

    #include fastcgi_params;

    #}

    #deny access to .htaccess files, if Apache's document root

    #concurs with nginx's one

    # #location ~ /\.ht {

    #deny all;

    #}

    }#another virtual host using mix of IP-, name-, and port-based configuration

    # #server {

    #listen 8000;

    #listen somename:8080;

    #server_name somename alias another.alias;

    #location / {

    #root html;

    #index index.html index.htm;

    #}

    #}

    #HTTPS server

    # #server {

    #listen 443 ssl;

    #server_name localhost;

    #ssl_certificate cert.pem;

    #ssl_certificate_key cert.key;

    #ssl_session_cache shared:SSL:1m;

    #ssl_session_timeout 5m;

    #ssl_ciphers HIGH:!aNULL:!MD5;

    #ssl_prefer_server_ciphers on;

    #location / {

    #root html;

    #index index.html index.htm;

    #}

    #}

    }

    其中的/pro-api是我们在项目的.env.production里面的变量

    更改完重新加载配置文件

    [root@HH sbin]#./nginx -s reload

    默认端口是80,访问云服务器的ip地址,如果访问成功,则配置成功

    如果没有访问成功,检查云服务器的端口是否开放

    展开全文
  • vue项目部署到服务器页面空白的问题接触vue也有一段时间,正好公司有手机端项目涉及到较数据处理方面的问题,考虑了一下就打算用vue进行开发,前期也是各种顺利,只在兄弟组件间通信时使用bus.vue中转的时候出现...

    vue项目部署到服务器页面空白的问题


    接触vue也有一段时间,正好公司有个手机端项目涉及到较多数据处理方面的问题,考虑了一下就打算用vue进行开发,前期也是各种顺利,只在兄弟组件间通信时使用bus.vue中转的时候出现第一次点击没有派发事件,考虑可能是点击元素派发使事件,又需点击确认按钮进行路由跳转出现的问题,不好解决该问题,使用vuex进行组件间数据通信,解决问题。

    一直到项目上线前都没有大问题出现,就等部署到部署到服务器,因为也是第一次使用vue上线的项目对后面的坑也是一无所知,直接使用webpack打包了dist目录就发给后端部署到服务器上去了;然后就出现如下问题;

    1. 路由跳转的时候使用mode: 'history'去掉#号,放到服务器crm目录下,根据www.asa.com/crm路径访问,出现获取不到资源问题,页面一片空白,搜索问题,路由配置文件中添加mode: 'history', base: '/crm/',
    2. 然后资源都获取到了也都加载了但是页面还是空白,没有进行渲染(这个问题好像和问题1相同,当时没有记录下来现在回忆起来有点模糊),通过后端配置解决了问题。
    3. 页面渲染成功各页面跳转页都正常了,但是又出现了在当前页面刷新都会出现404的问题,因为只有一个index.html文件,url中的路由跳转都是vue-router进行在实际文件中没有login.html等文件,服务器在找这些页面会找不到出现404错误,因此需要后端服务器配置进行404全部跳转到index.html解决问题。
    4. 闲着没事有想到问题3,后端到底如何配置的,自己就实现了一遍,以mac下自带apache为例进行配置
      • 到mac下apache安装路径/private/etc/apache2/httpd.conf中, (apahce的配置文件)
        开启rewrite_module功能,
        LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的#;
    DocumentRoot "/users/Dev/sites"(设置apache默认指向目录)
      <Directory "/users/Dev/sites">
          Options Indexes FollowSymLinks Multiviews
          MultiviewsMatch Any
          AllowOverride All
          Require all granted
        </Directory>

    设置AllowOverride All是为了使apache支持.hatccess文件。
    * 在该项目根目录添加.hatccess文件(index.html平级),内容跟https://router.vuejs.org/zh-cn/essentials/history-mode.html‘>HTML5 History 模式(vue-router文档举例)类似,

      <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /crm/
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /crm/index.html [L]
    </IfModule>

    ,需要修改的两个地方,RewriteBase /crm/;
    RewriteRule . /crm/index.html [L],要添加项目所在文件的文件名,

    展开全文
  • 腾讯云Centos部署Nginx下Vue项目

    千次阅读 2018-08-16 12:18:09
    作为 Web 服务器:相比较与 Apache, Nginx 使用更少的资源,支持更的并发连接,体现更高的效率,这点使 Nginx 尤为受到虚拟主机提供商的欢迎,能够支持高达 50000 并发的连接数的响应。 ...

    一、 Nginx 简介

    Nginx 是由俄罗斯软件工程师 Igor Sysoev 开发的一个高性能的 HTTP 和反向代理服务器,具备 IMAP/POP3 和 SMTP 服务器功能。

    作为 Web 服务器:相比较与 Apache, Nginx 使用更少的资源,支持更多的并发连接,体现更高的效率,这点使 Nginx 尤为受到虚拟主机提供商的欢迎,能够支持高达 50000 个并发的连接数的响应。

    作为负载均衡服务器: Nginx 既可以在内部直接支持 Rails 和 PHP,也可以支持作为 HTTP代理服务器对外惊醒服务, Nginx 用 C 语言编写,不论是系统资源开销还是 CPU 使用效率都比 Perlbal 要好的多。

    作为邮件代理服务器: Nginx 同时也是一个非常优秀的邮件代理服务器。(最早开发这个产品的目的之一也是作为邮件代理服务器)

    二、CentOS 7下安装部署
    配置epel yum 源
    wget http://dl.Fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm 
    rpm -ivh epel-release-latest-7.noarch.rpm
    yum install nginx -y


    查看确认 是否安装
    [root@localhost ~]# rpm -qa | grep nginx
    nginx-1.10.2-1.el7.x86_64
    nginx-mod-stream-1.10.2-1.el7.x86_64
    nginx-mod-http-geoip-1.10.2-1.el7.x86_64
    nginx-all-modules-1.10.2-1.el7.noarch
    nginx-mod-http-perl-1.10.2-1.el7.x86_64
    nginx-mod-http-image-filter-1.10.2-1.el7.x86_64
    nginx-mod-mail-1.10.2-1.el7.x86_64
    nginx-filesystem-1.10.2-1.el7.noarch
    nginx-mod-http-xslt-filter-1.10.2-1.el7.x86_64


    查看 安装nginx 所生成的文件 
    [root@localhost ~]# rpm -ql nginx 
    /etc/logrotate.d/nginx

    /etc/nginx/fastcgi.conf
    /etc/nginx/fastcgi.conf.default
    /etc/nginx/fastcgi_params
    /etc/nginx/fastcgi_params.default
    /etc/nginx/koi-utf
    /etc/nginx/koi-win
    /etc/nginx/mime.types
    /etc/nginx/mime.types.default
    /etc/nginx/nginx.conf
    /etc/nginx/nginx.conf.default
    /etc/nginx/scgi_params
    /etc/nginx/scgi_params.default
    /etc/nginx/uwsgi_params
    /etc/nginx/uwsgi_params.default
    /etc/nginx/win-utf
    /usr/bin/nginx-upgrade
    /usr/lib/systemd/system/nginx.service
    /usr/lib64/nginx/modules
    /usr/sbin/nginx
    /usr/share/doc/nginx-1.10.2
    /usr/share/doc/nginx-1.10.2/CHANGES
    /usr/share/doc/nginx-1.10.2/README
    /usr/share/doc/nginx-1.10.2/README.dynamic
    /usr/share/doc/nginx-1.10.2/UPGRADE-NOTES-1.6-to-1.10
    /usr/share/licenses/nginx-1.10.2
    /usr/share/licenses/nginx-1.10.2/LICENSE
    /usr/share/man/man3/nginx.3pm.gz
    /usr/share/man/man8/nginx-upgrade.8.gz
    /usr/share/man/man8/nginx.8.gz
    /usr/share/nginx/html/404.html
    /usr/share/nginx/html/50x.html
    /usr/share/nginx/html/index.html
    /usr/share/nginx/html/nginx-logo.png
    /usr/share/nginx/html/poweredby.png
    /usr/share/vim/vimfiles/ftdetect/nginx.vim
    /usr/share/vim/vimfiles/indent/nginx.vim
    /usr/share/vim/vimfiles/syntax/nginx.vim
    /var/lib/nginx
    /var/lib/nginx/tmp
    /var/log/nginx


    三、测试nginx 
    启动nginx  
    systemctl start nginx


    设置开机启动 
    systemctl enable nginx

     


    查看nginx 启动状态
    systemctl status nginx


    查看是否监听


     ss -tnl | grep 80 
    LISTEN    0      128          *:80                      *:*                  
    LISTEN    0      128        :::80                      :::* 


    测试 nginx


    在浏览器中输入 nginx 服务器的ip 地址 
    备注:如果不能正常访问,关闭防火墙
    systemctl stop firewalld.service #停止firewall
    systemctl disable firewalld.service #禁止firewall开机启动
    firewall-cmd --state #查看默认防火墙状态(关闭后显示notrunning,开启后显示running)

    测试页面

    安装成功

     

    ==》修改配置文件

     

     

     server {
            listen       80;
            server_name  localhost;

            location / {
                root      /home/vue-admin/dist;
                index     index.html;
                try_files $uri $uri/ /index.html;
            }

     

     

    可能遇到问题:

    1.

    Uncaught SyntaxError: Unexpected token <

    修改 config/index.js中

    assetsPublicPath: '/',

    修改

     

    2.

    vendor.353cc67f0a6cc81ae0fb.js:1 Error: Loading chunk 2 failed.

    =》修改dist/index.html 中 路径为./static

     

     

    展开全文
  • Vue项目部署到服务器并通过IP访问

    千次阅读 2019-09-04 15:50:23
    1、在项目根目录下执行命令npm run build,对项目进行打包,打包后会在项目根目录下出一dist文件夹 2、打开apache\conf\httpd.conf文件,增加监听端口 3、确保apache\conf\httpd.conf文件里的Include conf/...

    1、在项目根目录下执行命令npm run build,对项目进行打包,打包后会在项目根目录下多出一个dist文件夹

    2、打开apache\conf\httpd.conf文件,增加监听端口

    3、确保apache\conf\httpd.conf文件里的Include conf/extra/httpd-vhosts.conf前面没有【#】号

    4、打开第3步提到的http-vhost.conf文件,增加如下代码

    5、重启apache,在外部通过ip:8080来访问Vue项目

    展开全文
  • 1.准备工作。 1.首先准备安装VueVue-CLI ...,并且重命名为ApacheTomcat,这里要提一下,在这文件夹下有webapps,双击进去,会有很文件,不用关心。其中有一ROOT文件夹,这就是我们放置
  • 因为之前所接触的项目都是java,所以web服务器大部分都选择tomcat 因为工作的需要最近一直都在看Python的东西.言归正传. 1.因为我之前查看的资料都是flask部署是需要uswgi,所以就按照步骤进行按照,但是大部分的帖子...
  • Vue+Nodejs项目部署到阿里云服务器

    千次阅读 2019-01-27 23:10:26
    上传文件至云服务器 一、打包文件 在项目根目录下运行 ...云服务器Apache默认的根目录是/var/www/html,因此我们在这目录下新建music文件夹(这里以我的项目文件名为例) 将项目本地的dist文件夹移到云服务器m...
  • 本文以vue前端项目为例,名称和端口号用户可根据需要设置,保持一致即可。 1、修改server.xml文件(文件路径:C:\Program Files\Apache Software Foundation\conf) (1)、新增Service节点:复制并粘贴新节点; (2...
  • 前后端分离项目越来越成为主流,目前应用较的是前端为vue+elementUI 后端用SpringBoot。 一般的管理系统都要有登录和权限管理的功能,这里选用Apache的Shiro做为项目的安全框架。它是一非常易用的安全框架,提供...
  • Gin-vue-admin是一基于vue和gin开发的全栈前后端分离的后台管理系统,集成jwt鉴权,动态路由,动态菜单,casbin鉴权,表单生成器,代码生成器等功能,提供多种示例文件,让您把更时间专注在业务开发上。...
  • 个人整理的部署指南

    2020-12-09 10:47:51
    这里需要注意的是 pom.xml中 org.apache.maven.plugins 中 exclude需要注释掉不然打出来的包运行会报 Cannot determine embedded database driver class for database type NONE,这错误折腾了一天,...
  • 微人事是一前后端分离的人力资源管理系统,项目采用 SpringBoot+Vue 开发,项目加入常见的企业级应用所涉及到的技术点,例如 Redis、RabbitMQ 等。 项目地址:https://github.com/lenve/vhr 项目部署视频教程...
  • 减少了很指代 Vue 的临时变量 <ul><li>举栗子</li></ul> 传统情况 <pre><code>javascript import axios from 'axios' new Vue({ data: { user: "" }, created: function () { //此时...
  • × 项目合并和拆分:将2个项目目录合并起来,其中一个项目合并到另一个项目的子目录中,手动合并文件夹,自动修改数据库; × 流媒体服务; × websocket聊天室; 下载和安装 在release标签中下载二进制文件和源码...
  • 微人事是一前后端分离的人力资源管理系统,项目采用 SpringBoot+Vue 开发,项目加入常见的企业级应用所涉及到的技术点,例如 Redis、RabbitMQ 等。 项目地址:https://github.com/lenve/vhr 项目部署视频教程...
  • 微人事是一前后端分离的人力资源管理系统,项目采用 SpringBoot+Vue 开发,项目加入常见的企业级应用所涉及到的技术点,例如 Redis、RabbitMQ 等。 项目地址:https://github.com/lenve/vhr 项目部署视频教程...
  • 这会是一认真做的业务开源项目,目前 Java 代码 2w+ 行,不包括注释的情况下。 整体的功能如下图: 功能图,和实际后端模块拆分,并不是绝对对应。 功能列表 - H5 商城 功能列表 - 管理后台 交流群:传送...
  • 微服务下一个系统被拆分为多个服务,但是像 安全认证,流量控制,日志,监控等功能是每个服务都需要的,没有网关的话,我们就需要在每个服务中单独实现,这使得我们做了很多重复的事情并且没有一个全局的视图来统一...
  • https://gitee.com/sendya/ant-design-pro-vue.git (本项目前端项目由这开源项目改造而来) https://gitee.com/vilson/vue-projectManage.git (本项目项目管理系统,就是把这集成过来,尚未完成) ...
  • Ztuo 框架可以使你很容易的建立一套数字货币交易系统,但是,她远远比搭建一网站要难的.不要以为简单的就是点击下一步,下一步即可完成。整个体系架构分为了很的组件,需要专业的知识或者团队才能运行成功...
  • 1.有些人访问报错:org.apache.ibatis.binding.BindingException: Parameter 'xxx' not found,Available parameters are [0, 1, param1, param2] 为什么会出现部分人报错,有些却不报错呢? 答案参考这篇分析文章:...
  • 省份模块:一个省份可能存在多个景点 景点模块:一个景点对应多个省份 项目演示 进入系统需登录: 用户注册页面: 省份列表页面: 添加省份页面: 修改省份页面: 景点列表页面: 添加景点页面: 修改景点...
  • 缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。 可视化效果...

空空如也

空空如也

1 2
收藏数 23
精华内容 9
关键字:

apache部署多个vue项目

vue 订阅