如何将Vue.js项目部署到服务器上

PHPz

发布时间：2023-04-18 14:10:01

2311人浏览过

来源于php中文网

原创

随着前端技术的发展，前端所负责的范围变得更加广泛。而vue.js作为一种javascript框架，已经在前端开发中大量使用。随着应用程序的不断扩张，vue.js应用程序需要在服务器上部署，使其可以在web浏览器中访问。本文将介绍如何将vue.js应用程序部署到服务器上。

一、Vue.js项目的打包

在部署Vue.js应用程序之前，首先需要将Vue.js应用程序打包。Vue.js应用程序的打包是将应用程序的所有静态文件集中在一起，并将其合并为一个或多个文件。打包的目的是提高应用程序的加载速度并简化其开发和部署。

对于Vue.js应用程序，可以使用Vue CLI进行打包。Vue CLI是一个Vue.js的命令行工具，可以快速创建和管理Vue.js项目。首先要确保Vue CLI已经安装在本地计算机中。在命令终端中输入以下命令：

npm install -g @vue/cli

完成Vue CLI的安装后，可以使用以下命令创建Vue.js项目：

立即学习“前端免费学习笔记（深入）”；

vue create my-vue-app

然后，进入Vue.js项目的目录，并使用以下命令进行打包：

npm run build

该命令将Vue.js应用程序打包到一个名为“dist”的文件夹中。打包的文件夹包含应用程序的所有静态文件和一个“index.html”文件，可以直接用浏览器打开。

二、服务器的选择

在将Vue.js应用程序部署到服务器之前，需要先选择适合的服务器。有许多不同类型的服务器可以用于托管Vue.js应用程序，例如Apache、Nginx、Express等。在此，我们将选择Nginx作为服务器。

Nginx是一种轻量级的Web服务器，其性能很强，是许多大型网站所使用的服务器。Nginx具有高可扩展性和可定制性，可以在Ubuntu、CentOS等操作系统上运行。

三、服务器配置

安装Nginx之前，需要先更新服务器上的软件包。在命令终端中输入以下命令：

sudo apt update
sudo apt upgrade

更新软件包后，可以使用以下命令安装Nginx：

视野自助系统小型企业版2.0 Build 20050310

自定义设置的程度更高可以满足大部分中小型企业的建站需求，同时修正了上一版中发现的BUG，优化了核心的代码占用的服务器资源更少，执行速度比上一版更快主要的特色功能如下： 1）特色的菜单设置功能，菜单设置分为顶部菜单和底部菜单，每一项都可以进行更名、选择是否隐藏，排序等。 2）增加企业基本信息设置功能，输入的企业信息可以在网页底部的醒目位置看到。 3）增加了在线编辑功能，输入产品信息，企业介绍等栏

下载

sudo apt-get install nginx

安装完成后，Nginx会自动启动。可以通过以下命令检查Nginx的运行状态：

sudo systemctl status nginx

如果一切正常，将看到Nginx正在运行。

接下来，需要修改Nginx的配置文件以便使用Vue.js应用程序。首先，需要备份Nginx的默认配置文件。在命令终端中输入以下命令：

sudo mv /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak

备份完成后，可以创建一个新的配置文件。在命令终端中输入以下命令：

sudo nano /etc/nginx/sites-available/default

在文件中添加以下内容：

server {
  listen 80;
  server_name your-server-ip;

  location / {
      root /var/www/html/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

请确保将“your-server-ip”替换为服务器的IP地址，将“/var/www/html/dist”替换为Vue.js应用程序的打包文件夹路径。

保存并退出文件，然后重启Nginx以使更改生效。在命令终端中输入以下命令：