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: './' })
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
利用Vue的v-for和v-bind實現(xiàn)列表顏色切換
這篇文章主要介紹了利用Vue的v-for和v-bind實現(xiàn)列表顏色切換,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue 如何添加全局函數(shù)或全局變量以及單頁面的title設置總結(jié)
本篇文章主要介紹了vue 如何添加全局函數(shù)或全局變量以及單頁面的title設置總結(jié),非常具有實用價值,需要的朋友可以參考下2017-06-06vue-cli3在main.js中console.log()會報錯的解決
這篇文章主要介紹了vue-cli3在main.js中console.log()會報錯的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue-router鉤子函數(shù)實現(xiàn)路由守衛(wèi)
這篇文章主要介紹了vue-router鉤子函數(shù)實現(xiàn)路由守衛(wèi),對vue感興趣的同學,可以參考下2021-04-04