How to deploy the server in vue project

With the popularity of the Vue framework in Web front-end development, more and more developers are using Vue to build their own Web applications. For most developers, local development of Vue projects is not a problem, but how to deploy the project to the server is a more troublesome problem. This article will share some experiences and techniques for deploying Vue projects to servers.

1. Server environment preparation

Before deploying the Vue project, you need to prepare a server and install Node.js and NPM environment. Node.js is a JavaScript running environment based on the Chrome V8 engine, which can run JavaScript code, and NPM is the package management tool of Node.js, used to install, manage and publish JavaScript packages. If you have not installed Node.js and NPM, please install these two software first.

In addition, you also need to install the two tools Git and PM2 on the server. Git is a version control system used to pull code from the code base, and PM2 is a daemon manager that can be started. , stop, restart and monitor Node.js applications.

2. Configure Nginx server

Before deploying the Vue project to the server, you need to configure the Nginx server to handle HTTP requests. Nginx is a high-performance HTTP and reverse proxy server that can route requests to different ports and can also enable SSL certificates to provide HTTPS support.

Before configuring Nginx, you need to package the Vue project into a static file. This can be achieved by using the build command in the Vue CLI:

$ npm run build

After executing this command, the project will A dist directory is generated in the root directory, which contains packaged static files.

Next, use the following command to install Nginx on the server:

$ sudo apt-get update
$ sudo apt-get install nginx

After installation, you can edit the /etc/nginx/sites-available/default file to configure the Nginx server:

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/html;
    index index.html;

    server_name example.com;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

In this example, an Nginx server listening on port 80 is configured. The root directive is used to set the root directory of Nginx, the server_name is used to set the server name, and the location directive is used to set the request route.

It should be noted that since the Vue project is a single-page application (SPA), all pages are dynamically generated by JavaScript and CSS, so a location directive needs to be added to the Nginx server to handle dynamic Routing:

location /api/ {
    proxy_pass http://localhost:3000/;
    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;
}

In this example, when the /api/ path is requested, it is proxied to port 3000 of the local machine and some HTTP header information is set.

3. Deploy the Vue project to the server

Once the Nginx server is configured, the Vue project can be deployed to the server. The following are some specific steps:

1. Use Git to pull the Vue project code on the server:

$ git clone https://github.com/username/vue-project.git

2. Enter the project directory and install the dependencies:

$ cd vue-project
$ npm install

3. Create a PM2 configuration file in the project root directory:

{
  "name": "vue-project",
  "script": "npm",
  "args": "start",
  "env": {
    "NODE_ENV": "production"
  }
}

In this example, a process named vue-project is configured, using npm start The command starts the application and sets the production environment variables.

4. Use PM2 to start a Vue project:

$ pm2 start pm2.config.js

This way you can start a Vue project on the server and access the application by accessing the URL on the Nginx server.

4. Conclusion

In this article, we introduce how to deploy the Vue project to the server. Through simple configuration, the Vue project can be deployed to the production environment, and Nginx and PM2 are used to provide powerful HTTP service and process management functions. I hope this article will be helpful to developers who want to deploy Vue projects to the server.

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