Vue3中vite.config.js文件相关配置和mock数据配置

---

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 => { }
      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

上面已经完成了跨域相关的配置，现在我们来试着发起网络请求。

父组件：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

子组件：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

除了上面的配置方法以外，我们还可以将网络配置添加到开发环境中，就像下面这样：

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
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

2. 路径别名

在 vite.config.js 中配置：

import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
})
1
2
3
4
5
6
7
8
9

在 jsconfig.json 或 tsconfig.json 中配置：

{ 
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}
1
2
3
4
5
6
7
8
9

3. mock数据配置

安装：

yarn add vite-plugin-mock mockjs -D
1

在 vite.config.js 中配置：

import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [vue(), viteMockServe({})],
})
1
2
3
4
5

在项目根目录下面创建目录 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23