The Vue project is packaged and deployed to the cloud server to connect to the remote database

After the vue project is packaged, it can be viewed directly through an html interface, and uploaded to the cloud server resource list to directly access it. There are many unnecessary operations in the packaging and deployment of the online Vue project, and it still needs to be accessed through the :8088 port of the cloud server site, which is very troublesome. Here we directly introduce the simplest operations. The example used is the knowledge map project of the previous article . Specific steps include:

1. Local packaging of the VUE project

(1) First ensure that the vue project connects to the local database and accesses successfully

This is the local directory of the Vue project.

Belowsrc\components , the vue file is the main program file. First, you need to ensure that the local access to the project is successful. The specific operation is to use the cmd command in the project root directory:

npm run dev

Build the vue project, and then enter port 127.0.0.1:8088 in the browser to access.

(2) Modify the project file to connect to the cloud database

Change the localhost in the database path in the .vue file to the public network ip of the cloud server. The account password should also be mainly consistent with the cloud.
For example:

// 原先的服务器连接函数
_this.driver = neo4j.driver("bolt://localhost", neo4j.auth.basic("neo4j", "123456"), {
    
    encrypted: false})
// 修改后的服务器连接函数
_this.driver = neo4j.driver("bolt://124.221.176.99", neo4j.auth.basic("neo4j", "123456"), {
    
    encrypted: false})

(3) Project packaging
Modify the file configuration of the project \cofig\index.js, package the entire vue project, and the result is stored in the static folder.

    // Paths
    // assetsSubDirectory是打包输出路径
    // assetsPublicPath是打包输入路径
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
    
    },

Enter the cmd command line in the project root directory, and enter npm run buildthe execution packaging command.

2. The neo4j database on the cloud server is open for remote access

Modify the configuration of related databases on the cloud server, and open remote access and ports.
For example, for the neo4j database in the cloud: edit neo4j.conf


and then upload the data to the cloud database

3. Project upload and deployment

This step is to upload the packaged Vue project to the cloud server file resource. Access our project through ip address.
Specifically, it is operated through the pagoda panel (there is a big difference before and after the pagoda revision, you need to pay attention):
(1) Go to the left menu-website-PHP project (don't worry about this, although it is not php, but it is the same). Add a site and write the public network ip. ! Then at this time, a public network ip directory folder will be generated, and the data can be uploaded to this folder to directly access the project through http://public network ip.
Pay special attention, do not upload to \home or \home\www, it is useless!

The .user.ini here is automatically generated.

The final display results are as follows:

Summary: These steps have been done before, but they were not recorded in time at that time, they were all forgotten, and it took a lot of time to pick them up again! Therefore, it needs to be recorded in time.