Deploy the Vue project on a Linux server

Case 1

vue-cli builds the vue3 project, uploads the project to the Linux server, installs node on the server, and starts the vue project

First, there is a vue project locally, which can be accessed normally after startup

After local packaging, you can also access it directly

If the index.html page is blank after packaging, you need to create a new vue.config.js in the root path of the project and repackage it.

Install nodejs on Linux server, refer to

# Download the node compressed package. The path where the command is executed will be the path where the download will be. wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1-linux-x64.tar.gz      
# Cut the compressed package to the /usr/local/bin/ path and decompress it tar -xvf node-v12.16.1-linux-x64.tar.gz       
# Change the folder name to NodeJs   
  mv node-v12.16.1-linux-x64 NodeJs  
# Install gcc        
  yum install gcc gcc-c++            
# There are three files in the /usr/local/bin/NodeJs/bin path: node npm npx
# Set soft links for these three files. The /usr/bin directory is used to store system commands. At this time, executing node in any path is equivalent to executing the file in the /usr/local/bin/NodeJs/bin/node path. After executing node, you will enter the node environment. ln -s /usr/local/bin/NodeJs/bin/node /usr/bin/node         
  ln -s /usr/local/bin/NodeJs/bin/npm /usr/bin/npm          
  ln -s /usr/local/bin/NodeJs/bin/npx /usr/bin/npx         
# Enter the root directory cd
# Verify node

Upload the Vue project to the Linux server, compile and run

# Enter the root directory of the vue project cd /home/web
# Install dependencies npm install
# Compile and package npm run build
# Start the project npm run serve

test

Error summary

When compiling the project on the Linux server, the following error is reported, indicating that the node version is too low.

The following error is reported when compiling the project on the Linux server, indicating that the node version 17.1.0 is too high

Solution, reference

# If you have previously installed node using yum, you need to uninstall and reinstall it. For installation steps, refer to the installation method using `source package` in this blog# Uninstall nodejs
  yum remove nodejs npm -y
# Enter /usr/local/lib and delete all node and node_modules folders # Enter /usr/local/include and delete all node and node_modules folders # Enter /usr/local/bin and delete node executable files

If you get an error message "Insufficient permissions" when compiling or starting a project

Solution

# Set the permissions of the specified file chmod 777 /home/web/xxx

Error when running the project: warnings potentially fixable with the --fix option

Solution: Change "lint": "vue-cli-service lint" in package.json of the project to: eslint --fix --ext .js,.vue src

refer to

Case 2

vue-cli builds the vue3 project and puts the dist file on tomcat after packaging

Install Tomcat on Linux Server

# Use docker to pull the tomcat container docker pull tomcat   
# Start docker run -d -p 8080:8080 tomcat in the background    
# After startup, the browser visits http://192.168.0.102:8080/ and returns 404
# Solution:
# Open port 8080 to the outside world firewall-cmd --zone=public --add-port=8080/tcp --permanent  
# Restart the firewall to take effect firewall-cmd --reload     
# Enter the tomcat container docker exec -it Running container id /bin/bash     
# Copy all files in the webapps.dist directory to the webapps path cp -r webapps.dist/* ./webapps        
# Delete the webapps.dist directory rm -rf webapps.dist           
# Now you can access the tomcat page through the browser, but the tomcat image still displays 404 after restart. You need to submit the current modified container as a new image. # Exit without stopping the container ctrl + p + q                  
# Submit a custom container in the running state. tomcat10:10.1 is my custom image name and version number. docker commit -a="Author" -m="Notes" The running container id is tomcat10:10.1       
#Stop the current tomcat container docker stop the running container id    
# Delete the container id after running docker rm    
# Start the image you submitted docker run -d -p 8080:8080 tomcat10:10.1         
 
# Supplement# When starting the tomcat image, an error is reported: driver failed programming external connectivity on endpoint quirky_allen
# Cause of error: port 8080 was occupied when the backend project was started before, so the backend project needs to be ended # Test, visit http://192.168.0.102:8080 and see the tomcat page indicating successful startup

Put the packaged project into the tomcat container

# Create a shared folder mkdir -p /home/mydocker/mytomcat8080/data
# Start container 8080:
  docker run \
  -p 8080:8080 \
  --name my-tomcat8080 \
  -v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \
  -d \
  tomcat10:10.1
# Error when starting the container: docker: invalid reference format.
# Cause of error: The docker command is written incorrectly. Here I wrote -v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \ There is an extra space after the colon # Enter the root directory of the vue project and generate a dist folder after packaging. Here we still use the project npm install in Case 1
  npm run build
# Copy the packaged files to tomcat
  mv dist /home/mydocker/mytomcat8080/data
#Restart the tomcat container docker restart tomcat container id
# Test, local access http://192.168.0.102:8080/dist/

This concludes this article about deploying Vue projects on Linux servers. I hope it will be helpful for everyone’s study, and I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: