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

最新推荐文章于 2024-08-11 13:18:04 发布

Alin_Wu_

最新推荐文章于 2024-08-11 13:18:04 发布

阅读量889

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/alin_wu_/article/details/130166267

版权

文章讲述了如何使用npmrunbuild命令打包Vue项目，生成dist文件夹。接着，通过创建一个本地服务器，利用express来运行和展示打包后的Vue页面。当路由模式为history时，为解决刷新导致的404问题，引入了connect-history-api-fallback中间件。

摘要由CSDN通过智能技术生成

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端口启动成功！');
    }
})

完成。