用Nginx配置Vue.js开发的网站
Web
字数1252 2020-03-17

Vue.js

Vue.js的组件化设计,写网站非常的方便,今天讲一下怎么用Nginx配置Vue.js开发的网站。

准备

  1. VPS
  2. 域名 (域名购买及指向VPS IP请自行Google)
  3. 网站的Git仓库

在服务器安装依赖

  1. 用命令 ssh root@your_vps_ip 登入你的VPS服务器
  2. 安装nvm: curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
  3. 安装node: nvm install 12.16.1
  4. 使用node: nvm use 12.16.1

替换备注:

构建网站

  1. 下载网站源码: git clone your_website_git
  2. 安装网站依赖: cd your_website_git && npm install
  3. 构建网站: npm run build

注意:下面Nginx的配置只对应Vue.js的History模式,Vue.js的History模式通过下面的方式来设置:

let router = new VueRouter({
    mode: 'history',
});

替换备注:

安装Nginx

安装nginx: apt-get install nginx

配置Nginx

创建网站配置文件:

touch /etc/nginx/sites-available/vue_project
ln -s /etc/nginx/sites-available/vue_project /etc/nginx/sites-enabled/vue_project
nano /etc/nginx/sites-available/vue_project

编辑配置文件: /etc/nginx/sites-available/vue_project

server {
  listen  80;
  server_name  www.linakesi.com linakesi.com;
  gzip on;
  location / {
    add_header Cache-Control 'private, no-store, max-age=0';
    root  /root/your_website_git/dist;
    index  index.html;
    try_files $uri $uri/ /index.html;
  }
}

把Nginx用户加入到网站访问权限:

gpasswd -a www-data root
chmod g+x /root

替换备注:

启动Nginx

nginx -t
service nginx restart

用浏览器访问 http://your_domain 就可以了。

更新网站版本

如果要更新网站,直接切换到服务器的网站目录,执行 git pull && npm run build 命令然后在浏览器端刷新即可,不用重启Nginx服务器。