首先全局安装 express-generator
npm install express-generator -g
进入我们的vite搭建的项目
在跟目录上执行
express --view=ejs server
此时 我们会发现在跟节点目录上出现一个server的文件夹
cd 进去,install 一下然后
npm start
一下 访问我们的localhost:3000 就可以看到了
比如我们快速生成一个list接口
此时 访问
http://localhost:3000/users/list
就可以看到了
在vite.config.js中配置一下
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
server:{
host:"0.0.0.0",
proxy:{
'/api':{
target:'http://localhost:3000/',
changeOrigin:true,
rewrite:(path) => path.replace(/^\/api/,'')
}
}
},
plugins: [vue()]
})
然后在我们项目中快速请求一下
<script>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import {Button, Tabs, Switch, Dialog} from "qdleader-ui"
import {reactive} from 'vue'
import axios from 'axios'
export default {
name:'Login',
setup(){
let account = reactive({
username:"",
password:""
})
function Submit(){
axios.get('/api/users/list').then(
res=>{
console.log("返回的数据是:",res.data)
},
e=>{
console.log("axios返回错误信息:",e.message)
}
)
}
Submit()
return{
account,
Submit
}
}
}
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
<Button type="danger">危险按钮</Button>
<div><Button>按钮</Button></div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
然后就可以访问啦
对于线上的假数据不稳定,这样也是个不错的选择。