进行解析支持npm init @vitejs/app
npm install vite-plugin-vue2 -D
npm install vue-template-compiler -D
server: {
port: 8081, // 自己本地需要运行的端口
fs: { // 不对根目录访问做限制
strict: false,
},
proxy: {
'/Index': { // 不要写成根路径!!!否则会直接跳转到线上地址
target: 'http://www.需要代理的地址/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\//, '') // 不要写成rewrite: (path) => path.replace(/^\/Index/, '')!!!否则会报404
},
'/Home': { // 不要写成根路径!!!否则会直接跳转到线上地址
target: 'http://www.需要代理的地址/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\//, '')
},
}
},
npm i vite-plugin-svg-icons -D
// 引入
import viteSvgIcons from 'vite-plugin-svg-icons'
// 插件配置
plugins: [
viteSvgIcons({
iconDirs: [path.resolve(process.cwd(), 'src/icons')], // 在src下新建文件夹icons
symbolId: 'icon-[dir]-[name]'
})
],
注意:如果使用 import viteSvgIcons from 'vite-plugin-svg-icons’报错,则需要换成这种写法
import { createSvgIconsPlugin } from ‘vite-plugin-svg-icons’
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/icons')], // 在src下新建文件夹icons
symbolId: 'icon-[dir]-[name]'
})
<template>
<svg aria-hidden="true">
<use :href="symbolId" :fill="color" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
prefix: {
type: String,
default: 'icon',
},
name: {
type: String,
required: true,
},
color: {
type: String,
default: '#333',
},
},
data() {
return {
symbolId: ''
}
},
mounted() {
this.symbolId = `#${this.prefix}-${this.name}`
},
}
</script>
<style scoped>
svg { // 根据开发需求设置css
width: 20px;
height: 20px;
}
</style>
注意⚠️:vue3中SvgIcon组件代码这么写
<template>
<svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size">
<use :xlink:href="symbolId" rel="external nofollow" :fill="props.color" />
</svg>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
prefix: {
type: String,
default: 'icon'
},
name: {
type: String,
required: true
},
color: {
type: String,
default: '#ffffff'
},
size: {
type: String,
default: '1rem'
}
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
<style scoped>
svg {
width: 16px;
height: 16px;
}
</style>
import 'virtual:svg-icons-register'
// main.ts中引入
import SvgIcon from './components/SvgIcon.vue'
createApp(App)
.use(router)
.component('svg-icon', SvgIcon)
.mount('#app')