【Vue项目总结】项目nginx部署

CntChen 发布于2019-07-25 14:50 / 2046人阅读

摘要：项目开发完成，接下来是上线，关于项目的部署，我司前端是部署在服务器上，关于的相关文档，请自行查阅本文只记录部署时碰到的一些问题。其他总结文章常规打包优化方案组件通信处理方案后台管理项目总结

项目开发完成，接下来是上线，关于vue项目的部署，我司前端是部署在nginx服务器上，关于nginx的相关文档，请自行查阅；本文只记录部署时碰到的一些问题。

打包

vue项目打包后，是生成一系列的静态文件，包括项目的请求IP都打入包内，如果后台服务改动，这时你的前端文件，又要重新编译打包，这里采用的是后台管理项目总结提到的前端自行请求一个配置文件，动态修改你的相关配置。

静态文件

// config.json
{
  "api": "test.com"
}

请求文件

在项目store中请求你的配置文件，写入state中，在调用的时候可以全局访问到你的配置

// api.js
GetConfigApi() {
  return new Promise((resolve, reject) => {
    axios
      .get(`/config.json?v=${new Date().getTime()}`)
      .then(result => {
        const configApi = {
          API: result.data["api"], // 统一接口
        };
        resolve(configApi);
      })
      .catch(error => {
        reject(error);
      });
  });
}

nginx部署

因为vue-router有hash和history不同的两种模式，使用不同的模式，nginx的配置不同，hash模式下，不需要改动，只需要部署你的前端文件就可以了，所以这里只讨论history模式下.conf文件的修改

访问修改nginx配置文件nginx.conf

server {
  listen  80;
  server_name  test.com;

  location / {
    root  /front; // 前端文件路径
    index  index.html; // hash模式只配置访问html就可以了
    try_files $uri $uri/ /index.html; // history模式下
  }
}

修改完成，重启服务访问test.com

部署到子级目录

当我们需要把项目部署到子级目录下时，则需要修改项目的BASE_URL，生成一个子级目录下的绝对访问路径。修改对应的.conf配置文件

server {
  listen  80;
  server_name  test.com;

  location /demo { // 子级目录
    alias  /front/demo;
    index  index.html;
    try_files $uri $uri/ /demo/index.html; 
  }
}

修改完成，重启服务访问test.com/demo

缓存处理

前端项目的静态文件常常会被浏览器缓存，而项目编译后，js，css，图片等实际上是已经有hash值来去除了缓存，但是项目更新后，仍然会出现缓存问题，这是由于我们的项目整个入口都是在index.html文件上，浏览器实际是缓存了我们的html页面，所以我们要在nginx中告诉浏览器，html文件不被缓存。

  location /demo {
    add_header Cache-Control "private, no-store, max-age=0";
    ...
  }

总结

这里只讨论了nginx相关的部署，实际上vue-router文档上是有相关的配置例子的。

其他总结文章：

webpack常规打包优化方案

组件通信处理方案

后台管理项目总结

混合云服务器托管腾讯云服务器部署vue项目外呼项目总结云服务器搬迁项目总结云服务器搭建vue项目

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

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

vue+express+mysql项目总结（node项目部署阿里云通用）

摘要：原文发布于我的个人博客上原文点这里前面经历千辛万苦，终于把博客的所有东西都准备好了，现在就只等部署了。我的远程连接工具是用的是，文件上传用的是。原文发布于我的个人博客上：原文点这里前面经历千辛万苦，终于把博客的所有东西都准备好了，现在就只等部署了。下面我介绍下我的部署过程：一、购买服务器和域名如果需要域名（不用域名通过ip也可以访问，虽然不方便，但可以节约一年几十块钱的...

charles_paul 2019-08-01 18:30 评论0 收藏0
vue+express+mysql项目总结（node项目部署阿里云通用）

摘要：原文发布于我的个人博客上原文点这里前面经历千辛万苦，终于把博客的所有东西都准备好了，现在就只等部署了。我的远程连接工具是用的是，文件上传用的是。原文发布于我的个人博客上：原文点这里前面经历千辛万苦，终于把博客的所有东西都准备好了，现在就只等部署了。下面我介绍下我的部署过程：一、购买服务器和域名如果需要域名（不用域名通过ip也可以访问，虽然不方便，但可以节约一年几十块钱的...

dreamGong 2019-08-30 13:53 评论0 收藏0
vue+express+mysql项目总结（node项目部署阿里云通用）

摘要：原文发布于我的个人博客上原文点这里前面经历千辛万苦，终于把博客的所有东西都准备好了，现在就只等部署了。我的远程连接工具是用的是，文件上传用的是。原文发布于我的个人博客上：原文点这里前面经历千辛万苦，终于把博客的所有东西都准备好了，现在就只等部署了。下面我介绍下我的部署过程：一、购买服务器和域名如果需要域名（不用域名通过ip也可以访问，虽然不方便，但可以节约一年几十块钱的...

newtrek 2019-08-26 11:34 评论0 收藏0
Vue项目部署（阿里云+Nginx代理+PM2）

摘要：最近部署一个项目到阿里云上，因为项目涉及一些跨域请求，所以采用了代理请求本地的服务利用做进程管理。先交代下在阿里云里安装的部署环境调试运行大礼包，里面包含等，还能监控端口占用情况服务进程管理工具等等。不过目前只是实现构建部署访问。最近部署一个Vue项目到阿里云ECS上，因为项目涉及一些跨域请求，所以采用了Nginx代理请求本地的node服务（利用pm2做进程管理）。node服务借助a...

Drinkey 2019-07-25 14:42 评论0 收藏0
Vue项目部署遇到的问题及解决方案

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

姘搁『 2019-08-23 14:38 评论0 收藏0