1. vite.config.js文件相关配置
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
// 插件，vue就是以插件的方式集成到vite工具中
plugins: [vue(), vueJsx({
// 默认只对扩展名为 .jsx/.tsx 进行babel解析
// 需要需要它解析.vue扩展名下面的jsx
// include: /\.[jt]sx/
// include: /\.[jt]sx|vue/
})],
// 添加别名
resolve: {
alias: {
'@': path.resolve('src')
}
},
server: {
// 配置端口
port: 8080,
// 自动打开浏览器
open: false,
// 通过配置开发时，代理服务器，在开发时进行跨域解决
proxy: {
'/api': {
target: 'https://api.iynn.cn/film',
// 改变请求头源地址
changeOrigin: true,
// 重写，如果目标地址中存在 /api，就将 /api 替换为空字符串
// rewrite: path => path.replace(/^\/api/, '')
// rewrite: path => { }
}
}
}
})
上面已经完成了跨域相关的配置，现在我们来试着发起网络请求。
父组件：
<template>
<div>
<child :films="films" />
</div>
</template>
<script setup>
import {
onMounted, ref } from 'vue'
import axios from 'axios'
import child from '@/components/child.vue'
const films = ref([])
onMounted(async () => {
let ret = await axios.get('/api/v1/getNowPlayingFilmList?cityId=110100&pageNum=1&pageSize=10')
films.value = ret.data.data.films
})
</script>
<style lang="scss" scoped></style>
子组件：
<template>
<div>
<h3>child组件中</h3>
<ul>
<li v-for="item of films" :key="item.filmId">{
{ item.name }}</li>
</ul>
</div>
</template>
<script setup>
defineProps(['films'])
</script>
<style lang="scss" scoped></style>
除了上面的配置方法以外，我们还可以将网络配置添加到开发环境中，就像下面这样：
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'
// export default defineConfig((command, mode, ssrBuild) => {
export default defineConfig(({
mode }) => {
let config = {
plugins: [vue(), vueJsx()],
// 添加别名
resolve: {
alias: {
'@': path.resolve('src')
}
}
}
// 开发环境中添加网络代理
if ('development' === mode) {
// 开发环境
config = {
...config,
server: {
// 配置端口
port: 8080,
// 自动打开浏览器
open: false,
// 通过配置开发时，代理服务器，在开发时进行跨域解决
proxy: {
'/api': {
target: 'https://api.iynn.cn/film',
changeOrigin: true
}
}
}
}
}
return config
})
2. 路径别名
在 vite.config.js 中配置：
import {
resolve } from 'path'
export default defineConfig({
resolve: {
alias: {
'@': resolve('src')
}
}
})
在 jsconfig.json 或 tsconfig.json 中配置：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
3. mock数据配置
安装：
yarn add vite-plugin-mock mockjs -D
在 vite.config.js 中配置：
import {
viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [vue(), viteMockServe({
})],
})
在项目根目录下面创建目录 mock，创建文件 mock/index.js：
import Mockjs from 'mockjs'
const mockData = [
{
url: '/api/films',
method: 'get',
response: ({
query }) => {
const data = Mockjs.mock({
'films|10': [
{
"filmId|+1": 1,
'name': '@cname'
}
]
})
return {
code: 0,
msg: 'ok',
data
}
}
}
]
export default mockData
App.vue：
<template>
<div>
<ul>
<li v-for="item of films" :key="item.filmId">{
{ item.name }}</li>
</ul>
</div>
</template>
<script setup>
import {
onMounted, ref } from 'vue'
import axios from 'axios'
const films = ref([])
onMounted(async () => {
let ret = await axios.get('/api/films')
films.value = ret.data.data.films
})
</script>
<style lang="scss" scoped>
</style>
