Vue3 如何引入静态资源（六）

文章目录

- 静态资源分两种情况：
- 解决办法
- - 使用前置条件
  - 引入静态资源的场景案例：

静态资源分两种情况：

第三方资源，需要从node_module中引用，这个vite脚手架会帮我们移动到工程目录\node_modules\.vite_opt_cache目录中
当前工程的静态资源文件，例如：图片

解决办法

使用前置条件

配置目录别名，方便引用（本地工程静态资源的引用）
vite.config.js配置如下

1
2
3
4
5
6
7

module.exports = {
alias: {
// 键必须以斜线开始和结束
'/@/': path.resolve(__dirname, './src')
// '/@components/': path.resolve(__dirname, './src/components')
}
}

如果是引入第三方文件，则需要引入第三方文件
vite.config.js 配置信息如下：

1
2
3
4
5
6

module.exports = {
// 引入第三方的配置
optimizeDeps: {
include: ["moment", "echarts", "axios", "mockjs"]
}
}

会将引入的第三方文件移动到E:\gitcode\工程目录\node_modules\.vite_opt_cache目录中
在这里插入图片描述

总的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const path = require('path')
// vite.config.js # or vite.config.ts

console.log(path.resolve(__dirname, './src'))

module.exports = {
// 引入第三方的配置
optimizeDeps: {
include: ["moment", "echarts", "axios", "mockjs"]
},
alias: {
// 键必须以斜线开始和结束
'/@/': path.resolve(__dirname, './src')
// '/@components/': path.resolve(__dirname, './src/components')
}
}

引入静态资源的场景案例：

Vue文件引入其他Vue文件作为组件

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<template>
<div class="screen" v-if="isShowScreen">

<ScreenHeader></ScreenHeader>
<div class="screen--main">

<div class="screen--main__item screen--main__column1">
<Column1First></Column1First>
<Column1Second></Column1Second>
</div>

<div class="screen--main__item screen--main__column2">
<CenterMap></CenterMap>
</div>

<div class="screen--main__item screen--main__column3">
<Column3First></Column3First>
<Column3Second></Column3Second>
</div>

<div class="screen--main__item screen--main__column4">
<Column4First></Column4First>
</div>
</div>
</div>
</template>

<script>
// 一定要以“/”开头
import Column1First from '/@/pages/screen/column1/Column1First.vue'
import Column1Second from '/@/pages/screen/column1/Column1Second.vue'
import CenterMap from '/@/pages/screen/column2/CenterMap.vue'
import Column3First from '/@/pages/screen/column3/Column3First.vue'
import Column3Second from '/@/pages/screen/column3/Column3Second.vue'
import Column4First from '/@/pages/screen/column4/Column4First.vue'
import ScreenHeader from './ScreenHeader.vue'
import * as API from '/@/api/apiConfig.js'

export default {
data () {
return {
isShowScreen: false,
changeTime: 5 * 60 * 1000
// changeTime: 4 * 1000
}
},
provide: function () {
return {
screenContext: this
}
},
components: {
ScreenHeader,
Column4First,
Column3Second,
Column3First,
CenterMap,
Column1First,
Column1Second
},
async mounted () {
await this.getChangeType()
},
methods: {
getChangeType () {
API.getChangeTypeService().then(res => {
// this.changeTime = res.data.changeTime * 60 * 1000
this.changeTime = 5 * 60 * 1000
this.isShowScreen = true
})
}
}
}
</script>

在这里插入图片描述

在Vue文件中引用第三方文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 获取粉丝数量
import Mock from 'mockjs'
const ctx = 'myproject'

// 获取销售占比，当月总销售
Mock.mock(RegExp(`/${ctx}/api/v1/tickets/getSaleNum` + '*'), {
code: '0',
msg: 'success',
data: {
handRate: '33',
onlineRate: '67.0',
totalTicket: 794561670
}
})

在html静态页面中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">



<script src="/@/assets/js/echarts.min.js"></script>
<script src="/@/assets/js/china.js"></script>
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

在css 样式 style中使用

1
2
3
4
5
6
7
8
9
10
11
12
13

在html