How to deploy Vue.js project to server

With the development of front-end technology, the scope of front-end responsibility has become wider. Vue.js, as a JavaScript framework, has been widely used in front-end development. As the application continues to expand, the Vue.js application needs to be deployed on the server so that it can be accessed in a web browser. This article will introduce how to deploy a Vue.js application to the server.

1. Packaging of Vue.js project

Before deploying a Vue.js application, you first need to package the Vue.js application. Packaging of a Vue.js application is the process of gathering together all the static files of the application and merging them into one or more files. The purpose of packaging is to increase the loading speed of your application and simplify its development and deployment.

For Vue.js applications, you can use the Vue CLI for packaging. Vue CLI is a Vue.js command line tool that can quickly create and manage Vue.js projects. First make sure that Vue CLI is installed on your local computer. Enter the following command in the command terminal:

npm install -g @vue/cli

After completing the installation of Vue CLI, you can use the following command to create a Vue.js project:

vue create my-vue-app

Then, enter the directory of the Vue.js project, and Use the following command to package:

npm run build

This command packages the Vue.js application into a folder named "dist". The packaged folder contains all the static files of the application and an "index.html" file, which can be opened directly with a browser.

2. Server selection

Before deploying the Vue.js application to the server, you need to select a suitable server. There are many different types of servers that can be used to host Vue.js applications, such as Apache, Nginx, Express, etc. Here, we will choose Nginx as the server.

Nginx is a lightweight web server with strong performance and is the server used by many large websites. Nginx is highly scalable and customizable and can run on operating systems such as Ubuntu and CentOS.

3. Server configuration

Before installing Nginx, you need to update the software package on the server. Enter the following command in the command terminal:

sudo apt update
sudo apt upgrade

After updating the software package, you can use the following command to install Nginx:

sudo apt-get install nginx

After the installation is completed, Nginx will start automatically. You can check the running status of Nginx through the following command:

sudo systemctl status nginx

If everything is normal, you will see that Nginx is running.

Next, you need to modify the Nginx configuration file to use the Vue.js application. First, you need to back up Nginx’s default configuration file. Enter the following command in the command terminal:

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

After the backup is completed, you can create a new configuration file. Enter the following command in the command terminal:

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

Add the following content to the file:

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

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

Be sure to replace "your-server-ip" with the IP address of the server and "/var /www/html/dist” with the packaging folder path of your Vue.js application.

Save and exit the file, then restart Nginx for the changes to take effect. Enter the following command in the command terminal:

sudo systemctl restart nginx

4. Deploy the Vue.js application

Now, the Vue.js application is ready to be deployed to the server. The packaging folder of your Vue.js application can be uploaded to the server using tools such as SCP or FTP. After the upload is complete, please ensure that the permissions of the packaging folder are set so that the Nginx user has access:

sudo chmod -R 755 /var/www/html/dist

After the Vue.js application is successfully deployed to the server, you can enter the server's IP in the web browser Address to access the Vue.js application.

Summary

Packaging the Vue.js application through the Vue CLI and deploying it using Nginx as the server can quickly and easily deploy the Vue.js application to the Internet. You can freely customize Nginx's configuration file to suit your needs. Deploying Vue.js applications requires caution, but it is also a skill that every Vue.js developer should know.

The above is the detailed content of How to deploy Vue.js project to server. For more information, please follow other related articles on the PHP Chinese website!