node. JS deploy Vue code

Time:2022-5-3

Technology: node JS + Express framework

preface

After the Vue code is packaged, the dist file is generated, and the index.exe in it is opened directly HTML, the page cannot be displayed normally

So you need to deploy them with the server. Follow me to use node JS rapid deployment!

node. JS deploy Vue code

node. JS deploy Vue code

Note: Vue packaging commandnpm run build

1、 Quickly build small servers

1. Manage projects with NPM

  • New demo folder
  • Terminal input commandnpm init
  • Get project name

node. JS deploy Vue code

  • Then go all the way back to the end

2. Install Express

npm i express

3. The main file of the new server in the directoryserver.js, write the following code

node. JS deploy Vue code

//Introducing Express
const express = require('express')

//Call express to create an app service instance object
const app = express()

//Configure backend routing
app.get('/person', (req, res) => {
    console. Log ('accessed ')
    //Return something to the client
    res.send({
        name: 'lily',
        age:18
    })
 })

//Set port listening
app.listen(5000, (err) => {
    if (!err) console. Log ('server started successfully! ')
    err && console.log(err)
    
})

A micro server was built

4. Start server

node server

node. JS deploy Vue code

5. Access server information

node. JS deploy Vue code

Normal access means that the server configuration is successful. Note that ‘/’ should be added when configuring the route

2、 Deploy front-end static resources

1. Create a new file (usually named static or public) under the root directory, and put the HTML, CSS and JS files in the dist directory after Vue packaging

node. JS deploy Vue code

2、server.jsSpecify static resource location in

app.use(express.static(__dirname+'/static'))

//Introducing Express
const express = require('express')

//Call express to create an app service instance object
const app = express()

//Specify static resources
app.use(express.static(__dirname+'/static'))


//Configure backend routing
app.get('/person', (req, res) => {
    console. Log ('accessed ')
    //Return something to the client
    res.send({
        name: 'lily',
        age:18
    })
 })

//Set port listening
app.listen(5000, (err) => {
    if (!err) console. Log ('server started successfully! ')
    err && console.log(err)
    
})

3. Accessing static resources

node. JS deploy Vue code

Click to jump to other pages, which can also be accessed normally

node. JS deploy Vue code

In this way, a project written by Vue is deployed to the server

If you setThe working mode of the router is hash mode, so this step is over!!

However, if you set the router working mode tohistorypattern, jump to other pages, and an error will be reported after refreshing

3、 Solve the problem of error reporting when the route is in history mode

1. Question

When you click to jump to other pages through the home page, it can be displayed normally

node. JS deploy Vue code

Refresh the page and 404 will be reported

node. JS deploy Vue code

node. JS deploy Vue code

2. Cause

  • When clicking jump, the network request will not be sent, and the front-end router will drive the page and URL to change
  • However, when refreshed, a network request is sent. Take the following path as a resource to request the server, but there is no path under the server/home/news This resource, so it is reported incorrectly
  • In hash mode, the#/And the following paths are used as resources to request the server

3. Settle

1. Installationconnect-history-api-fallback

npm i connect-history-api-fallback

2. Useconnect-history-api-fallback

//Introducing Express
const express = require('express')
//Introduce connect history API fallback
const history = require('connect-history-api-fallback');

//Call express to create an app service instance object
const app = express()

//Note: it must be written before the specified static resource
app.use(history())

//Specify static resources
app.use(express.static(__dirname+'/static'))


//Configure backend routing
app.get('/person', (req, res) => {
    console. Log ('accessed ')
    //Return something to the client
    res.send({
        name: 'lily',
        age:18
    })
 })

//Set port listening
app.listen(5000, (err) => {
    if (!err) console. Log ('server started successfully! ')
    err && console.log(err)
    
})

node. JS deploy Vue code

Regular INX, backend matching, other solutions

End, sprinkle flowers!