vue3+vite相对路径的处理方式
更新时间:2023年06月05日 16:44:36 作者:kidrue
这篇文章主要介绍了vue3+vite相对路径的处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue3+vite相对路径处理
import { resolve } from 'path'; function pathResolve(dir: string) { return resolve(process.cwd(), '.', dir); } // const root = process.cwd(); //以下为vite-config 输出的配置 resolve: { alias: [//别名 // /@/xxxx => src/xxxx { find: /\/@\//, replacement: pathResolve('src') + '/', }, // /#/xxxx => types/xxxx { find: /\/#\//, replacement: pathResolve('types') + '/', }, ], },
<template> <ConfigProvider :locale="getAntdLocale"> <AppProvider> <RouterView /> </AppProvider> </ConfigProvider> </template> <script lang="ts" setup> //使用例子 import { ConfigProvider } from 'ant-design-vue'; import { AppProvider } from '/@/components/Application'; import { useTitle } from '/@/hooks/web/useTitle'; import { useLocale } from '/@/locales/useLocale'; // support Multi-language const { getAntdLocale } = useLocale(); // Listening to page changes and dynamically changing site titles useTitle(); </script>
使用 /@/ 即可为相对路径
vue3+vite打包配置相对路径
在 vite.config.js 下加上 base: ‘./’
如下所示
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], base: './' })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决
这篇文章主要介绍了vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04vue实现锚点跳转之scrollIntoView()方法详解
这篇文章主要介绍了vue实现锚点跳转之scrollIntoView()方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09
最新评论