majun
/
practice_Vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'guoyanqiang' into dev

guoyanqiang 5 months ago
parent
ed5ed3b0ff 14a8869df9
commit
be313e9ab1
8 changed files with 345 additions and 427 deletions
Unified View
  1. 10
      src/api/boguApi.js
  2. 5
      src/api/homeApi.js
  3. 10
      src/api/zhiboApi.js
  4. 258
      src/views/ClubView.vue
  5. 307
      src/views/HomeView.vue
  6. 151
      src/views/LiveView.vue
  7. 27
      vite.config.js

10
src/api/boguApi.js
View File

@ -0,0 +1,10 @@
import service from "./indexApi";
const boguApi = {
selectBogu(queryType){
//查询首页的数据
return service.post('/api/show/getShowList', {queryType: queryType});
}
}
export default boguApi;

5
src/api/homeApi.js
View File

@ -1,9 +1,8 @@
import service from "./indexApi"; import service from "./indexApi";
const homeApi = { const homeApi = {
selectHome(queryType){ selectHome(){
//查询首页的数据 //查询首页的数据
return service.post('/api/show/getShowList', {queryType: queryType}); return service.post('/api/show/getShowList');
} }
} }

10
src/api/zhiboApi.js
View File

@ -0,0 +1,10 @@
import service from "./indexApi";
const zhiboApi = {
selectZhibo(queryType){
//查询首页的数据
return service.post('/api/live/getLiveList', {queryType: queryType});
}
}
export default zhiboApi;

258
src/views/ClubView.vue
View File

@ -25,9 +25,9 @@
<!-- 视频列表 --> <!-- 视频列表 -->
<div class="video-list"> <div class="video-list">
<div class="video-card" v-for="(video, index) in videos" :key="index"> <div class="video-card" v-for="(videos, index) in videos" :key="index">
<div class="video-thumbnail" @click="incrementViews(index)"> <div class="video-thumbnail" @click="incrementViews(index)">
<img :src="video.thumbnail" alt="Video Thumbnail" /> <img :src="videos.cover" alt="Video Thumbnail" />
<div class="play-button"> <div class="play-button">
<span class="play-icon">▶</span> <span class="play-icon">▶</span>
</div> </div>
@ -45,19 +45,19 @@
<span class="homily-text">HomilyLink</span> <span class="homily-text">HomilyLink</span>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<span class="date">{{ video.date }}</span> <span class="date">{{ videos.publishTime }}</span>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<img src="../pic/bofang.png" alt="Views" class="views-icon" /> <img src="../pic/bofang.png" alt="Views" class="views-icon" />
<span class="views">{{ video.views }}</span> <span class="views">{{ videos.viewCount }}</span>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<img src="../pic/bofang.png" alt="Comments" class="comments-icon" @click.stop="toggleComments(index)" /> <img src="../pic/bofang.png" alt="Comments" class="comments-icon" @click.stop="toggleComments(index)" />
<span class="comments">{{ video.comments }}</span> <span class="comments">{{ videos.commentCount }}</span>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<img src="../pic/dianzan.png" alt="Likes" class="likes-icon" @click.stop="toggleLikes(index)" /> <img src="../pic/dianzan.png" alt="Likes" class="likes-icon" @click.stop="toggleLikes(index)" />
<span class="likes">{{ video.likes }}</span> <span class="likes">{{ videos.likeCount}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -77,108 +77,156 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue'; // import { ref, onMounted } from 'vue';
// import axios from 'axios';
const videos = ref([ // // 定义接口地址常量
{ // const API_URL = 'http://192.168.8.235:8000/api/show/getShowList';
thumbnail: 'src/pic/1.jpg', // // 定义接口调用函数
title: '第一节《影形结构同现》', // const fetchShowList = async () => {
date: '05-26 11:42', // try {
views: 643, // // 发送 POST 请求
comments: 5, // const response = await axios.post(API_URL);
likes: 3, // // 处理响应数据
isLiked: false, // console.log('接口返回数据:', response.data);
isCommented: false // // 这里可以根据返回的数据更新页面状态
}, // } catch (error) {
{ // // 处理错误
thumbnail: 'src/pic/2.jpg', // console.error('接口请求出错:', error);
title: '第二节《强势结构形态》', // }
date: '01-11 09:55', // };
views: 498, // const videos = ref([
comments: 10, // {
likes: 12, // thumbnail: 'src/pic/1.jpg',
isLiked: false, // title: '第一节《影形结构同现》',
isCommented: false // date: '05-26 11:42',
}, // views: 643,
]); // comments: 5,
// likes: 3,
// 弹出框相关 // isLiked: false,
const showModal = ref(false); // isCommented: false
const modalTitle = ref(''); // },
const modalContent = ref(''); // {
// thumbnail: 'src/pic/2.jpg',
// 增加播放量 // title: '第二节《强势结构形态》',
const incrementViews = (index) => { // date: '01-11 09:55',
videos.value[index].views += 1; // views: 498,
saveToLocalStorage(); // comments: 10,
}; // likes: 12,
// isLiked: false,
// 切换评论状态 // isCommented: false
const toggleComments = (index) => { // },
if (videos.value[index].isCommented) { // ]);
videos.value[index].comments -= 1; // // 弹出框相关
videos.value[index].isCommented = false; // const showModal = ref(false);
} else { // const modalTitle = ref('');
videos.value[index].comments += 1; // const modalContent = ref('');
videos.value[index].isCommented = true; // // 增加播放量
} // const incrementViews = (index) => {
saveToLocalStorage(); // videos.value[index].views += 1;
}; // saveToLocalStorage();
// };
// 切换点赞状态 // // 切换评论状态
const toggleLikes = (index) => { // const toggleComments = (index) => {
if (videos.value[index].isLiked) { // if (videos.value[index].isCommented) {
videos.value[index].likes -= 1; // videos.value[index].comments -= 1;
videos.value[index].isLiked = false; // videos.value[index].isCommented = false;
} else { // } else {
videos.value[index].likes += 1; // videos.value[index].comments += 1;
videos.value[index].isLiked = true; // videos.value[index].isCommented = true;
} // }
saveToLocalStorage(); // saveToLocalStorage();
}; // };
// // 切换点赞状态
// 查看更多的动态效果 // const toggleLikes = (index) => {
const showMore = () => { // if (videos.value[index].isLiked) {
modalTitle.value = '查看更多内容'; // videos.value[index].likes -= 1;
modalContent.value = '正在加载更多内容...'; // videos.value[index].isLiked = false;
showModal.value = true; // } else {
}; // videos.value[index].likes += 1;
// videos.value[index].isLiked = true;
// 查看更多专题的动态效果 // }
const showMoreTopics = () => { // saveToLocalStorage();
modalTitle.value = '查看更多专题'; // };
modalContent.value = '正在加载更多专题...'; // // 查看更多的动态效果
showModal.value = true; // const showMore = () => {
}; // modalTitle.value = '查看更多内容';
// modalContent.value = '正在加载更多内容...';
// 关闭弹出框 // showModal.value = true;
const closeModal = () => { // };
showModal.value = false; // // 查看更多专题的动态效果
}; // const showMoreTopics = () => {
// modalTitle.value = '查看更多专题';
// 保存到本地存储 // modalContent.value = '正在加载更多专题...';
const saveToLocalStorage = () => { // showModal.value = true;
localStorage.setItem('videos', JSON.stringify(videos.value)); // };
}; // // 关闭弹出框
// const closeModal = () => {
// 从本地存储加载 // showModal.value = false;
const loadFromLocalStorage = () => { // };
const savedVideos = localStorage.getItem('videos'); // // 保存到本地存储
if (savedVideos) { // const saveToLocalStorage = () => {
videos.value = JSON.parse(savedVideos); // localStorage.setItem('videos', JSON.stringify(videos.value));
} // };
}; // // 从本地存储加载
// const loadFromLocalStorage = () => {
// const savedVideos = localStorage.getItem('videos');
// 清除本地存储（调试用） // if (savedVideos) {
localStorage.removeItem('videos'); // videos.value = JSON.parse(savedVideos);
// 初始化加载 // }
onMounted(() => { // };
loadFromLocalStorage(); // // 清除本地存储（调试用）
}); // localStorage.removeItem('videos');
// // 合并 onMounted 逻辑
// onMounted(() => {
// fetchShowList();
// loadFromLocalStorage();
// });
import boguApi from '@/api/boguApi';
import { ref } from 'vue';
const videos = ref([]);
function formatTime(queryType) {
boguApi.selectBogu(queryType).then(resp => {
if(resp.data){
videos.value = resp.data.list;
console.log(videos.value);
}
}).catch(error => {
// 处理请求错误
console.error('获取视频列表失败:', error);
});
}
formatTime();
</script> </script>
<style scoped> <style scoped>
.header-content p { .header-content p {

307
src/views/HomeView.vue
View File

@ -4,16 +4,16 @@
<el-col :span="17" :xs="24"> <el-col :span="17" :xs="24">
<div class="section-title">推荐</div> <div class="section-title">推荐</div>
<el-row :gutter="20" class="recommend-videos" style="margin-right: -25px;"> <el-row :gutter="20" class="recommend-videos" style="margin-right: -25px;">
<el-col :span="24" v-for="video in video" :key="video.id"> <el-col :span="24" v-for="video in recommendedVideos" :key="video.id">
<el-card class="video-card" @click="incrementViews(scope.row.id)"> <el-card class="video-card">
<div class="video-content"> <div class="video-content">
<img :src="video.cover" alt="视频缩略图" class="video-thumbnail" /> <img :src="video.thumbnail" alt="视频缩略图" class="video-thumbnail" />
<div class="video-info"> <div class="video-info">
<div class="video-title1">{{ video.title }}</div> <div class="video-title1">{{ video.title }}</div>
<div style="text-align: left;"><img src="../pic/bogu.png" v-if="video.clubId == '1'" /><img v-else /></div> <div style="text-align: left;"><img src="../pic/bogu.png" v-if="video.author == '博股俱乐部'" /><img v-else /></div>
<div class="video-meta1"> <div class="video-meta1">
<img class="icon" :src="video.publisherAvatar" /> <img class="icon" src="../pic/link.jpg" />
<span> {{ video.publisherName }} {{ video.publishTime }}</span> <span> {{ video.author }} {{ video.time }}</span>
<div class="video-stats"> <div class="video-stats">
<el-icon> <el-icon>
<View /> <View />
@ -24,9 +24,9 @@
<el-icon> <el-icon>
<ChatDotSquare /> <ChatDotSquare />
</el-icon> </el-icon>
<el-button type="text">{{ video.likeCount }}</el-button> <el-button type="text">{{ video.likes }}</el-button>
<img src="../pic/like.png" class="like"> <img src="../pic/like.png" class="like">
<el-button type="text">{{ video.commentCount }}</el-button> <el-button type="text">{{ video.comments }}</el-button>
</div> </div>
</div> </div>
</div> </div>
@ -41,16 +41,16 @@
<el-col :span="24" v-for="video in featuredVideos" :key="video.id"> <el-col :span="24" v-for="video in featuredVideos" :key="video.id">
<el-card class="video-card"> <el-card class="video-card">
<div class="video-content"> <div class="video-content">
<img :src="video.cover" alt="视频缩略图" class="video-thumbnail" /> <img :src="video.thumbnail" alt="视频缩略图" class="video-thumbnail" />
<div class="video-info"> <div class="video-info">
<div class="video-title2">{{ video.title }}</div> <div class="video-title2">{{ video.title }}</div>
<div class="video-meta2"> <div class="video-meta2">
<div class="video-stats"> <div class="video-stats">
<el-icon class="my-icon"> <el-icon>
<View /> <View />
</el-icon> </el-icon>
<el-button type="text">{{ video.viewCount }}</el-button> <el-button type="text">{{ video.views }}</el-button>
<el-button type="text">{{ video.publishTime }}</el-button> <el-button type="text">{{ video.time }}</el-button>
<!-- <el-button type="text">{{ video.comments }}</el-button> --> <!-- <el-button type="text">{{ video.comments }}</el-button> -->
</div> </div>
</div> </div>
@ -65,172 +65,134 @@
</template> </template>
<script setup> <script setup>
import 'element-plus/dist/index.css';
import homeApi from '@/api/homeApi';
import { ref } from 'vue'; import { ref } from 'vue';
import 'element-plus/dist/index.css';
// import homeApi from '@/api/homeApi';
//初始化所有的推荐视频
// const video = ref([]);
// 初始化所有的推荐视频 //定义方法，获取推荐视频
const video = ref([]); // function getAllRecommendedVideos(queryType) {
// homeApi.selectHome()
// 定义方法，获取推荐视频 // .then(resp =>{
function getAllRecommendedVideos(queryType) { // video.value = resp.data.QueryRecommend;
homeApi.selectHome(queryType) // });
.then(resp =>{ // }
if(resp.data){ //页面加载时调用
video.value = resp.data.list; // getAllRecommendedVideos(1);
console.log(video.value); const recommendedVideos = ref([
}else{ {
console.log('获取推荐视频失败'); id: 1,
} thumbnail: 'src/pic/money.png',
}); title: '【机构财富密码破局之道5】MCD六彩神龙之吉龙抬头(普通话)',
} author: '小金',
time: '23小时前',
views: 15,
likes: 0,
comments: 1,
//精选视频 },
const featuredVideos = ref([]); {
id: 2,
// 定义方法，获取精选视频 thumbnail: 'src/pic/touzi.png',
function getAllFeaturedVideos(queryType) { title: '投资的真谛(永远的价值投资)一陆健大师(13.7.24)',
homeApi.selectHome(queryType) author: 'STW',
.then(resp =>{ time: '07-16 17:47',
if(resp.data){ views: 5,
featuredVideos.value = resp.data.list; likes: 0,
console.log(featuredVideos.value); comments: 0,
}else{ },
console.log('获取精选视频失败'); {
} id: 3,
}); thumbnail: 'src/pic/qiangshi.png',
} title: '第二节《强势结构形态》',
author: '博股俱乐部',
// 页面加载时调用 time: '01-24 09:55',
getAllRecommendedVideos(1); views: 498,
getAllFeaturedVideos(2); likes: 0,
comments: 12,
},
{
id: 4,
thumbnail: 'src/pic/jihuigu.png',
// const recommendedVideos = ref([ title: '价值投资之机会谷一Josie老师(11.7.24)',
// { author: 'STW',
// id: 1, time: '07-16 17:37',
// thumbnail: 'src/pic/money.png', views: 6,
// title: '【机构财富密码破局之道5】MCD六彩神龙之吉龙抬头(普通话)', likes: 0,
// author: '小金', comments: 0,
// time: '23小时前', },
// views: 15, {
// likes: 0, id: 5,
// comments: 1, thumbnail: 'src/pic/A.png',
// }, title: 'A股释放积极信号！一大批上市公司发布回购、业绩预增等公告',
// { author: '宋建军',
// id: 2, time: '07-16 16:22',
// thumbnail: 'src/pic/touzi.png', views: 3,
// title: '投资的真谛(永远的价值投资)一陆健大师(13.7.24)', likes: 0,
// author: 'STW', comments: 0,
// time: '07-16 17:47', },
// views: 5, ]);
// likes: 0,
// comments: 0,
// },
// {
// id: 3,
// thumbnail: 'src/pic/qiangshi.png',
// title: '第二节《强势结构形态》',
// author: '博股俱乐部',
// time: '01-24 09:55',
// views: 498,
// likes: 0,
// comments: 12,
// },
// {
// id: 4,
// thumbnail: 'src/pic/jihuigu.png',
// title: '价值投资之机会谷一Josie老师(11.7.24)',
// author: 'STW',
// time: '07-16 17:37',
// views: 6,
// likes: 0,
// comments: 0,
// },
// {
// id: 5,
// thumbnail: 'src/pic/A.png',
// title: 'A股释放积极信号！一大批上市公司发布回购、业绩预增等公告',
// author: '宋建军',
// time: '07-16 16:22',
// views: 3,
// likes: 0,
// comments: 0,
// },
// ]);
// 精选视频 // 精选视频
// const featuredVideos = ref([ const featuredVideos = ref([
// { {
// id: 1, id: 1,
// thumbnail: 'src/pic/wengehua.png', thumbnail: 'src/pic/wengehua.png',
// title: '温哥华弘粉之约-北美同城会陪你共话投资', title: '温哥华弘粉之约-北美同城会陪你共话投资',
// author: 'CANADA', author: 'CANADA',
// time: '07-08 19:47', time: '07-08 19:47',
// views: 523, views: 523,
// likes: 0, likes: 0,
// comments: 0, comments: 0,
// }, },
// { {
// id: 2, id: 2,
// thumbnail: 'src/pic/shengkuang.png', thumbnail: 'src/pic/shengkuang.png',
// title: '盛况！香港弘粉同城会圆满成功！', title: '盛况！香港弘粉同城会圆满成功！',
// author: '精彩回顾', author: '精彩回顾',
// time: '07-08 19:47', time: '07-08 19:47',
// views: 307, views: 307,
// likes: 0, likes: 0,
// comments: 0, comments: 0,
// }, },
// { {
// id: 3, id: 3,
// thumbnail: 'src/pic/jinrongzhan.png', thumbnail: 'src/pic/jinrongzhan.png',
// title: '金融战事再升级-欧盟对中国电动车征税的真相', title: '金融战事再升级-欧盟对中国电动车征税的真相',
// author: '精彩回顾', author: '精彩回顾',
// time: '06-27 17:30', time: '06-27 17:30',
// views: 144, views: 144,
// likes: 0, likes: 0,
// comments: 0, comments: 0,
// }, },
// { {
// id: 4, id: 4,
// thumbnail: 'src/pic/youxueban.png', thumbnail: 'src/pic/youxueban.png',
// title: '弘粉游学班：赏美景、品美食、学投资！', title: '弘粉游学班：赏美景、品美食、学投资！',
// author: '精彩回顾', author: '精彩回顾',
// time: '06-29 19:11', time: '06-29 19:11',
// views: 658, views: 658,
// likes: 0, likes: 0,
// comments: 0, comments: 0,
// }, },
// { {
// id: 5, id: 5,
// thumbnail: 'src/pic/meiyuanbaquan.png', thumbnail: 'src/pic/meiyuanbaquan.png',
// title: '美元霸权地位动摇！"石油美元"时代...', title: '美元霸权地位动摇！"石油美元"时代...',
// author: '精彩回顾', author: '精彩回顾',
// time: '06-18 14:00', time: '06-18 14:00',
// views: 538, views: 538,
// likes: 0, likes: 0,
// comments: 0, comments: 0,
// }, },
// ]); ]);
</script> </script>
<style scoped> <style scoped>
.video-card:hover{
transform: scale(1.01);
}
.my-icon{
right: 3px;
}
.like { .like {
height: 14px; height: 14px;
width: 14px; width: 14px;
@ -315,7 +277,6 @@ span {
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
color: #666; color: #666;
padding-top: 40px;
} }

151
src/views/LiveView.vue
View File

@ -3,17 +3,17 @@
<div class="course-grid"> <div class="course-grid">
<div v-for="course in courses" :key="course.id" class="course-card"> <div v-for="course in courses" :key="course.id" class="course-card">
<div class="course-image"> <div class="course-image">
<img :src="course.image" alt="课程图片"> <img :src="course.cover" alt="课程图片">
<div class="live-badge">即将开播</div> <div class="live-badge">即将开播</div>
<div class="live-time">{{ course.time }}</div> <div class="live-time">{{ course.startTime }}</div>
</div> </div>
<div class="course-info"> <div class="course-info">
<div class="course-title">{{ course.title }}</div> <div class="course-title">{{ course.title }}</div>
<div class="course-footer"> <div class="course-footer">
<div class="course-tag"> <div class="course-tag">
<img :src="course.avatar" alt="讲师头像"> <img :src="course.cover" alt="讲师头像">
<!-- <img src="../pic/images/1.png" alt="讲师头像"> --> <!-- <img src="../pic/images/1.png" alt="讲师头像"> -->
{{ course.teacher }} {{ course.publisherName }}
</div> </div>
<button class="book-btn" :class="{ active: course.booked }" @click="toggleBook(course.id)">预约</button> <button class="book-btn" :class="{ active: course.booked }" @click="toggleBook(course.id)">预约</button>
</div> </div>
@ -23,143 +23,26 @@
</div> </div>
</template> </template>
<script> <script setup>
import zhiboApi from '@/api/zhiboApi';
import { ref } from 'vue'; import { ref } from 'vue';
const courses = ref([]);
export default {
name: 'LiveCourses',
setup() {
const courses = ref([
{
id: 1,
title: '猎庄之顶级波段我公司不...',
teacher: '猎庄之顶级波段',
time: '明天09:55开播',
image: 'src/pic/images/1.png',
avatar: 'src/pic/images/link.jpg',
booked: false
},
{
id: 2,
title: '如何提前把握大盘和个股...',
teacher: '多空识庄短线寻...',
time: '明天10:00开播',
image: 'src/pic/images/2.png',
avatar: 'src/pic/images/link.jpg',
booked: false
},
{
id: 3,
title: '【粤语】AI铁皮训练-Tom...',
teacher: '【粤语】AI铁皮...',
time: '明天11:30开播',
image: 'src/pic/images/3.png',
avatar: 'src/pic/images/link.jpg',
booked: false
},
{
id: 4,
title: '构建有效的价值投资体系...',
teacher: '构建有效的价值...',
time: '明天20:30开播',
image: 'src/pic/images/4.png',
avatar: 'src/pic/images/link.jpg',
booked: false
},
{
id: 5,
title: '猎庄之顶级波段我公司不...',
teacher: '猎庄之顶级波段',
time: '明天09:55开播',
image: 'src/pic/images/5.png',
avatar: 'src/pic/images/link.jpg',
booked: false
},
{
id: 6,
title: '如何提前把握大盘和个股...',
teacher: '多空识庄短线寻...',
time: '明天10:00开播',
image: 'src/pic/images/6.png',
avatar: 'src/pic/images/link.jpg',
booked: false
},
{
id: 7,
title: '【粤语】AI铁皮训练-Tom...',
teacher: '【粤语】AI铁皮...',
time: '明天11:30开播',
image: 'src/pic/images/7.png',
avatar: 'src/pic/images/link.jpg',
booked: false
},
{
id: 8,
title: '构建有效的价值投资体系...',
teacher: '构建有效的价值...',
time: '明天20:30开播',
image: 'src/pic/images/8.png',
avatar: 'src/pic/images/link.jpg',
booked: false
}
]);
const toggleBook = async (id) => { function formatTime(queryType) {
const courseIndex = courses.value.findIndex(course => course.id === id); zhiboApi.selectZhibo(queryType).then(resp => {
if (courseIndex !== -1) { if(resp.data){
const course = courses.value[courseIndex]; courses.value = resp.data.list;
try { console.log(courses.value);
if (!course.booked) { }
// 预约课程 - POST 请求 })
const response = await fetch(`https://your-backend-api.com/bookings/${id}`, { }
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
courseId: id
})
});
if (!response.ok) {
throw new Error('预约失败');
}
// 更新本地状态
course.booked = true;
alert(`您已成功预约课程：${course.title}`);
} else {
// 取消预约 - DELETE 请求
const response = await fetch(`https://your-backend-api.com/bookings/${id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
}
});
if (!response.ok) {
throw new Error('取消预约失败');
}
// 更新本地状态 formatTime();
course.booked = false;
alert(`您已取消预约课程：${course.title}`);
}
} catch (error) {
console.error('预约请求失败:', error);
alert('预约请求失败，请稍后再试');
}
}
};
return {
courses,
toggleBook
};
}
};
</script> </script>
<style scoped> <style scoped>
.container { .container {
max-width: 1200px; max-width: 1200px;

27
vite.config.js
View File

@ -1,18 +1,25 @@
import { fileURLToPath, URL } from 'node:url' import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueDevTools from 'vite-plugin-vue-devtools';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({ export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://192.168.8.235:8000', // 后端服务器地址
changeOrigin: true, // 改变请求源
rewrite: (path) => path.replace(/^\/api/, '') // 重写路径，去掉 /api
}
}
},
plugins: [ plugins: [
vue(), vue(),
vueDevTools(), vueDevTools()
], ],
resolve: { resolve: {
alias: { alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)) '@': fileURLToPath(new URL('./src', import.meta.url))
}, }
}, }
}) });
Write Preview
|||||||
100:0
Loading…
Cancel
Save