正文

从零开始，轻松掌握Nginx+Vue SSR项目部署全攻略

/0 浏览量
0603

前言

随着前端技术的发展，Vue.js已成为当下流行的前端框架之一。Vue Server Rendered (SSR) 则为Vue带来了服务端渲染的能力，极大提升了用户体验。本文将带你从零开始，逐步了解如何使用Nginx部署Vue SSR项目。

环境搭建

1. 安装Node.js和npm

首先，确保你的开发环境已安装Node.js和npm。Vue CLI依赖于Node.js和npm，所以这两者是你开始构建Vue项目的基础。

  • Windows系统：可以从Node.js官网下载安装包，直接安装即可。
  • macOS/Linux系统：可以使用Homebrew安装：
  brew install node

2. 安装Vue CLI

Vue CLI是一个官方提供的前端项目脚手架，可以快速搭建Vue项目。

npm install -g @vue/cli

3. 创建Vue项目

使用Vue CLI创建一个Vue项目：

vue create my-vue-ssr

选择合适的配置选项，等待项目创建完成。

配置Vue SSR

1. 安装必要的依赖

Vue SSR需要一些额外的依赖，比如vue-server-renderer、express等。

cd my-vue-ssr
npm install vue-server-renderer express

2. 修改入口文件

在项目根目录下，找到src/server.js，进行如下修改：

const Vue = require('vue')
const express = require('express')
const renderer = require('vue-server-renderer').createRenderer()
const server = express()

// 导入Vue实例
const app = new Vue({
  data: {
    message: 'Hello Vue SSR!'
  },
  template: `<div>{{ message }}</div>`
})

// 渲染Vue应用
server.get('*', (req, res) => {
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello Vue SSR</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8080)

配置Nginx

1. 安装Nginx

在Windows系统中，可以从Nginx官网下载安装包进行安装；在Linux系统中，可以使用包管理器安装：

sudo apt-get install nginx

2. 配置Nginx

在Nginx的配置文件中，通常位于/etc/nginx/nginx.conf，添加如下配置：

server {
    listen       80;
    server_name  localhost;

    location / {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

保存并重启Nginx服务：

sudo systemctl restart nginx

部署Vue SSR项目

现在，你的Vue SSR项目已经配置完成。在开发环境中，你可以通过访问http://localhost来查看项目效果。

在生产环境中，你可以将项目部署到服务器，然后使用Nginx进行代理。

总结

通过本文，你学习了如何从零开始，使用Nginx部署Vue SSR项目。掌握这些知识，可以让你在项目中更好地应用Vue SSR，提升用户体验。祝你学习愉快！

-- 展开阅读全文 --