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

2023-06-03 08:34| 来源: 网络整理| 查看: 265

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

完成。

【本文地址】

公司简介

联系我们