How to deploy a Vue project on a Linux server
1. Package the Vue project locally. Take the
project running in vscode as an example, npm run buildenter . After the command is executed, a dist folder will be generated in the project directory, as shown in the figure below
2. Create a running file named: server.js
The content in server.js is as follows:
const express = require('express');
const app = express();
app.use(express.static('./dist'));
//运行时的端口，可以自己自定义
const port = 7777;
app.listen(port, function (err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:' + port + '\n');
});
3. Package and upload the file and upload the file to linux.
Create a folder in windows and name it yourself, such as buildtest. Copy the dist, node_modules, and server.js in the project to buildtest, as shown in the figure below.
4. Upload to Linux
There are many ways to upload files in windows to Linux. Here I use Xftp software.
If what you want to upload is not a hidden directory, you can use software such as MobaXterm to connect to the server and drag it directly to the corresponding folder. However, because the directory I uploaded is a hidden directory, I can’t find it on the visual interface. arrive.
Installation package:
Xftp https://www.aliyundrive.com/s/Ya282r7NYV5 提取码: 3b1i
点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。
After installing Xftp, connect to the Linux server
After the connection is successfully established, you will see the following interface.
Notice:! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
Be sure to package the buildtest into a compressed file. For example, I packaged it into a zip file here, otherwise the upload will be very slow, and the file may be lost. After selecting the location in Linux that you want to upload to in the session window, just drag and drop it in.
5. Unzip buildtest.zip and run
cd to the directory where buildtest.zip is stored in Linux. Execute the command unzip buildtest.zipto decompress buildtest.zip and store it in the same level directory, as shown in the figure below. Of course, if you don’t want to put it in the same level directory It can also be decompressed to other directories, and the relevant commands can be queried by themselves.
After decompression is successful, cd to buildtest, cd buildtest
and then run: node server.js
After success, as shown in the figure below, if there is no node.js error, just install it, there will be a prompt, follow the prompt to install.
6. Check whether it is running
Open the browser, enter, server IP+port, for example: http://192.168.1.112:7777, do not enter http://localhost:7777,
localhost is for the server, but the browser must be in On your local windows machine, so you have to enter the ip of the server.
Written in the back: When looking up the information, it is recorded that only dist and server.js are needed in the package file, but after I tried it, I reported an error and could not find node_modules. Later, I added a node_modules and it ran successfully.