vue vue-router(history模式) node(express)项目部署到云主机上的n

Honwhy 发布于2019-07-25 14:24 / 3574人阅读

摘要：这个方法我没有尝试过，不过应该是可行的这样的优点是很简便，适合小型的网站项目将打包的项目和服务端分别部署客户端根目录主页避免模式刷新管理控制后台服务端跨域这样部署虽然稍微麻烦一点，但可以适应很多场景，而且开发分工更方便，结构也一目了然

我个人想了2种部署方案

1、将vue项目打包后放入node服务端的静态资源中访问

整体结构基本是这样的

这样在云主机上的nginx配置就很简单

server {
    listen 80;
    # 你的域名
    server_name xxxxx.com;
    
    location / {
        # 你的node服务进程
        proxy_pass http://localhost:8088;
    }
}

但这样有一个问题，如果你的vue-router是history模式的话，你刷新或者手动输入url访问将会是404，你也很难通过修改nginx配置来规避这个错误（因为并不需要在nginx配置里面指定根目录）

解决办法：
vue官方
基于 Node.js 的 Express

对于 Node.js/Express，请考虑使用 connect-history-api-fallback 中间件。

这个方法我没有尝试过，不过应该是可行的！

这样的优点是很简便，适合小型的网站项目

2 将打包的vue项目和node服务端分别部署

server {
    listen 80;
    server_name xxx.com;
    # 客户端
    location / {
            # 根目录
            root html/client;
            # 主页
            index index/html index/htm;
            # 避免history模式刷新404
            try_files  $uri $uri/ /index.html;
    }
    # 管理控制后台
    location /admin {
            root html/admin;
            index index/html index/htm;
            try_files  $uri $uri/ /index.html;
    }
    # 服务端
    # api 
    location /api {
            proxy_pass   http://localhost:8088;
            # 跨域
            add_header "Access-Control-Allow-Origin" "*";
            add_header "Access-Control-Allow-Credentials" "true";
            add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
            add_header "Access-Control-Allow-Headers" "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type";
    }

}

这样部署虽然稍微麻烦一点，但可以适应很多场景，而且开发分工更方便，结构也一目了然

云服务器 GPU云服务器 node部署到云主机 node.js怎么部署到云主机上 node部署到云vps node.js怎么部署到云vps上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40066.html

vue-router改为history模式

摘要：打包好后本地测试运行是否正常环境搭建这个时候需要利用中的方法如下安装最新版本中将命令工具分家出来了还需要安装一个命令工具创建一个工程进入项目主目录安装必备包启动程序把打包后的文件夹放在文件夹里访问就能看到项目了这样测试好了后就可以丢后打包好后本地测试运行是否正常环境搭建：这个时候需要利用node中的express,方法如下: 安装express: npm install -g ex...

yunhao 2019-08-23 10:52 评论0 收藏0
Vue项目部署遇到的问题及解决方案

摘要：模式部署没有什么问题，只要访问到服务器上的，就可以访问网站了。问题起因在做年度账单项目的时候，项目部署的时候，用的是模式。这样几项配置后，就可以在子目录下访问网站，刷新也没有问题。写在前面 Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。 hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，...

姘搁『 2019-08-23 14:38 评论0 收藏0
webpack4.x升级摘要

摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展很久以前，互联网行业有个职位叫做软件开发工程师在那个时代，大家可能...

levinit 2019-08-23 18:11 评论0 收藏0
Vue+Express全栈购物商城

摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。二、历史版本基于Vue-CLI2.0:点我查看这个分支版本是一两年前...

Richard_Gao 2019-05-22 18:23 评论0 收藏0