Vue项目打包以及本地服务器创建并部署项目

 vue项目打包

npm run build

 此命令会生成一个dist文件夹，里面包含的内容就是html+css+javascript

创建一个文件夹，用vscode打开文件夹，并打开终端

创建一个小型本地服务器

node init

一般默认就行了，然后

npm i express

下载完毕，在package.json同级文件夹下新建一个server.js

输入以下代码

const express = require('express')

const app = express()

app.get('/school', (request, response) => {
//这里只存了一个school数据
    response.send({
        name: '桂林理工大学',
        address: '桂林市雁山镇'
    })
})

app.listen(5005, (err) => {
//5005是服务器端口，可自己定，但是不要和一些软件的默认端口冲突
    if (!err) {
        console.log('服务器5005端口启动成功！');
    }
})

启动服务器

node server

浏览器访问        localhost:5005/school        就可以看到服务器返回的数据了

在与server.js同级下创建一个static文件夹(一般是用static命名)，将打包好的dist下的文件复制到static文件夹下，修改server.js代码如下

const express = require('express')

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

app.get('/school', (request, response) => {
//这里只存了一个school数据
    response.send({
        name: '桂林理工大学',
        address: '桂林市雁山镇'
    })
})

app.listen(5005, (err) => {
//5005是服务器端口，可自己定，但是不要和一些软件的默认端口冲突
    if (!err) {
        console.log('服务器5005端口启动成功！');
    }
})

此时直接访问        localhost:5005        就可以看见用vue写的页面了（默认访问的是index.html）如果不显示页面，ctrl+c停止服务器并重新启动就可以了

路由的工作模式是hash，各种乱点再刷新是没问题的。但如果路由的工作模式是history，乱点之后刷新会报404，解决方法如下：

1.用正则匹配判断哪些是前端路由，哪些是后端路由（没了解，不太懂）

2.用npm的一个中间件

npm i connect-history-api-fallback

下载完成后修改server.js代码如下：

const express = require('express')
const history = require('connect-history-api-fallback')

const app = express()

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

app.get('/school', (request, response) => {
//这里只存了一个school数据
    response.send({
        name: '桂林理工大学',
        address: '桂林市雁山镇'
    })
})

app.listen(5005, (err) => {
//5005是服务器端口，可自己定，但是不要和一些软件的默认端口冲突
    if (!err) {
        console.log('服务器5005端口启动成功！');
    }
})

完成。