Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to deploy vue server related knowledge, detailed and easy to understand, simple and fast operation, has a certain reference value, I believe everyone will have a harvest after reading this vue how to deploy server article, let's take a look at it.

Deploy front-end project vue to server

The first corresponding is to find the item and enter the corresponding directory

Run npm build will generate a dist file and upload the entire dist file to the server.

Then, the first thing is to install the corresponding version of node.js. It is not recommended that the first version may have some inexplicable errors

After node.Js is installed, it is a soft connection similar to configuring environment variables

The next step is to install the expresse-generator generator.

npm install -g express -generator

create a project

Express Project Name

Enter Project Installation Dependency

npm install

Put the corresponding dist into public in the corresponding project name

run after

npm start

You can access it directly by opening your browser.

However, some projects belong to the front-end project separation needs to be back-end to the front-end processing corresponding return data results the whole time need Nginx reverse proxy this separation project

Recommended use of server pagoda panel installation can reduce a lot of operations and error probability

Corresponding or need to set their own port is not recommended to use the well-known port number is not recommended to use the default 80

You can set the port and host directly in prod.env.js in your own vue project, or you can set it in the Nginx configuration file nginx.conf

And the submission path of the front and back end databases should also match the virtual path of the back end. If it is a different server, change localhost to a public network address.

Otherwise, there will be an error in accessing the front end

It will greatly affect the judgment that there is a problem with the nginx.conf configuration.

The rest is to configure the nginx.conf file.

Port and host name for front-end access

The root here is the full path of dist

This must be done otherwise the corresponding front-end static resource cannot be accessed

location --* \. (gif|jpg|jpeg|png|css|js|ico|css|eot|svg|ttf|woff|mov)$ {

root dist full path of own project;

expires 48h;

access_log off;

}

Where/dushaoqin corresponds to the virtual path of its own backend, and the port used here is the port number of the backend

The rest of the place can be the same as me, mainly the general configuration

location /dushaoqin {

proxy_pass http://public network address: port number/virtual path/;

proxy_set_header Host $host;

proxy_connect_timeout 600; #Configuration Point 1

proxy_read_timeout 600; #Configuration point 2, if it does not work, you can consider configuring this time a little longer

proxy_send_timeout 600; #Configuration Point 3

proxy_set_header Host $host:$server_port;

proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection "upgrade";

}

So basically the front-end project is pretty much done here.

Open the running backend project to access the frontend resource path.

The main difficulty is

Whether the configuration of the corresponding nginx.conf and the path settings of the front and rear data interfaces api corresponding to vue are synchronized

About "vue how to deploy server" the content of this article is introduced here, thank you for reading! I believe everyone has a certain understanding of the knowledge of "how to deploy vue servers." If you still want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.