1. Vue project packaging

1. Package projects and modify files

After a local project is completed, you may need to deploy the project on the server and access the project using a public IP address. The following describes the deployment process.

First, package the written VUE project and run NPM Run build under the current directory of the VUE project. After running, you can find a folder dist in the project, which is packaged and can be used to run directly. The folder project contains a static file, which contains all the source code and data, and an index. HTML file, which is a web page file that can be run locally.

We need to change a few places before we can run it successfully. Open the index.js file under the config folder before packing, and change the assetsPublicPath property from ‘/’ to ‘./’ in the dev and build objects as shown below. Save and then pack (NPM run build).

Once the package is complete, open the index.html file under the dist folder and change the path of the code to the one shown in the red box below. It was originally ‘/’, but now it is ‘./’. There are four places in total. Then run the HTML file to see the calling project in the local browser. If it runs successfully, the package is successfully packaged.

2. Load the background image

If there is a background image in the project, it will not be displayed if you follow these steps. So how to load the background image as well. Open the utils.js file under the build file and add publicPath: ‘.. /.. /’, this line of code can solve the problem of background image not loading.

2. Server configuration environment

After the configuration of the above VUE project is completed, don’t worry about it first, configure the environment on the server before it can run. The server I use is Aliyun Ubuntu server, and the remote connection tool is Xshell.

Xshell how to connect to the server is not specific, the need to baidu. Once you have connected to the server, follow the steps below.

1. Install the Node environment. Since the Vue project depends on Node, install it first. Type in xshell

apt install npm
Copy the code

After the installation is complete, run the NPM -v command to check whether the installation is successful. If the version number of NPM is displayed, the installation is successful. NPM is foreign, the download speed is very slow, so change to CNPM, download things faster. Run the command

npm i -g cnpm
Copy the code

This download may be slow, so wait a while. Don’t cancel it without installing it. If an error is reported and the installation is not successful, try installing again. After the installation is complete, run the CNPM -v command to check whether the installation is successful.

After installing Node, you can enter node on the CLI to test whether the Node. js environment is installed on the server. If an arrow appears, the installation is complete. To exit, run Ctrl+ C twice.

2. After the installation is complete, you need to upload the packaged files to the server. Check out my previous tutorial “Ali Cloud Server Initial Configuration”, in the third step (login to connect to the server), follow this step to install LRZSZ to the server for command file transfer. Or file transfer via Xshell’s XFTFP. Select the Dist folder in the VUE project and send it to the root directory of the server. If you can’t select a folder, zip the dist folder and the server decompresses it using the zip command.

3. Port 8080 is generally used in vUE project, but Ali Cloud server does not open this port by default. Please refer to “Ali Cloud Server Initial Configuration” for how to develop the port in the second step. After opening port 8080, run the command CNPM i-g serve in xshell to install the serve module. Then enter the dist folder and run the command serve -l 8080 to successfully deploy the VUE project to the server.

============ 2020-11-15 added to ===============

Recently, when I wanted to redeploy a project, I found that it was useless to open the port from the Ali Cloud console. Opening the port there might only open a permission that the external network can access. If the port is not opened on the server, it is also useless. Ali cloud may have opened 8080 by default before the port.

Now to open the other ports, run the following command to open the ports on the server as well. The following commands can be run on centos or Ubuntu

1Firewall -cmd --zone=public --list-ports

2, if you do not want to open the port, just open the port, such as the following is open8099This port firewall-cmd --zone=public --add-port=8099/tcp --permanent

3Make the above configuration take effect immediately firewall-cmd --reload4If you want to close the current port firewall-cmd --zone=public --remove-port=8099/ TCP --permanent start: systemctl start firewalld Check the status: systemctl status Firewalld Disable or disable startup upon startup: Systemctl disable firewalld Stops running: systemctl stop firewalldCopy the code

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

4. In the address box of the browser, enter Public IP address: port (8080) to access your project. Note It is not the IP address printed by Xshell, but the private IP address of the server.

Release the terminal

The above vUE project will always occupy the terminal of the server after the service is started. If you want to do other operations or close xshell, the current port will be closed. If you want your project to hang on the server all the time and be able to access it either after xshell is turned off or after estimation, you can solve this problem by doing the following.

1. Run CNPM I pm2 -g to install pM2, and make sure vim and Touch are installed on the server. Create a new serve.sh file in the dist folder project and run the command

touch serve.sh
Copy the code

Then check whether the file is successfully created by ls, open it with vim, and run the command

vim serve.sh
Copy the code

Install the serve module first. Otherwise, an error message may be displayed. As a result, the service is started but the Internet cannot access it. If errors occur, pM2 logs can be used to view the logs to see what errors occurred.

npm install -g serve
Copy the code

Open and write to the file

serve -l 8080
Copy the code

In vim, I is to insert, esc is to switch mode, :wq is to save and exit, and :q is to exit.

Save and exit the Vim editor.

2. Start the service and run the command. Online: running

pm2 start serve.sh
Copy the code

3. To stop the service, run the following command

pm2 stop serve.sh
Copy the code

At this point, vUE project deployment to the server is completed, no domain name can be directly used to access the public IP address: port number.