Vue3?vite配置css?的sourceMap及文件引用配置別名的過(guò)程
更新時(shí)間：2023年07月06日 11:31:36 作者：任磊abc
這篇文章主要介紹了Vue3 vite配置css的sourceMap,及文件引用配置別名的過(guò)程，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
Vite 2.9配置瀏覽器加載 CSS 源映射
vite.config.ts，有一個(gè)devSourcemap屬性css可以設(shè)置為true。
這是vite.config.ts我目前正在使用的文件：
export default defineConfig({
plugins: [
vue(),
checker({
typescript: true,
vueTsc: true,
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
css: {
devSourcemap: true,
},
});引用文件配置別名
export default ({ mode, command }) => {
console.log(command);
// console.log(mode);
const boo = mode === 'dev';
const alias = {
'@': path.resolve(__dirname, './src'),
pages: path.resolve(__dirname, './src/pages'),
assets: path.resolve(__dirname, './src/assets'),
images: path.resolve(__dirname, './src/assets/image'),
store: path.resolve(__dirname, './src/store'),
plugins: path.resolve(__dirname, './src/plugins'),
components: path.resolve(__dirname, './src/components')
};
// if (boo) {
alias['vue-i18n'] = 'vue-i18n/dist/vue-i18n.cjs.js';
// }
return defineConfig({
server: {
host: '0.0.0.0',
port: 85
},
css: {
devSourcemap: boo
},
resolve: {
alias
},
/* proxy: {
'/api': {
target: 'http://localhost:3333/',
changeOrigin: true,
ws: true,
rewrite: (pathStr) => pathStr.replace('/api', '')
}
} */
});
};到此這篇關(guān)于Vue3 vite配置css 的sourceMap ,以及文件引用配置別名的文章就介紹到這了,更多相關(guān)Vue3 vite配置sourceMap內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能
這篇文章主要介紹了vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
UniApp中實(shí)現(xiàn)類(lèi)似錨點(diǎn)定位滾動(dòng)效果
一個(gè)uniapp小程序的項(xiàng)目,我們需要實(shí)現(xiàn)一個(gè)非常實(shí)用的功能——類(lèi)似于錨點(diǎn)定位的交互效果,即在首頁(yè)中有多個(gè)tab（分類(lèi)標(biāo)簽）,每個(gè)tab對(duì)應(yīng)著不同的模塊,當(dāng)用戶點(diǎn)擊某個(gè)分類(lèi)的tab時(shí),需要流暢地滾動(dòng)到對(duì)應(yīng)的內(nèi)容位置,提供更好的用戶體驗(yàn),2023-10-10
vue是一個(gè)mvvm框架，即數(shù)據(jù)雙向綁定，即當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化。本文將通過(guò)示例詳解其中原理，需要的可以參考一下2022-05-05
在vue中動(dòng)態(tài)添加class類(lèi)進(jìn)行顯示隱藏實(shí)例
今天小編就為大家分享一篇在vue中動(dòng)態(tài)添加class類(lèi)進(jìn)行顯示隱藏實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件
這篇文章主要介紹了如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
使用Vue純前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼并實(shí)現(xiàn)倒計(jì)時(shí)
在實(shí)際的應(yīng)用開(kāi)發(fā)中,涉及用戶登錄驗(yàn)證、密碼重置等場(chǎng)景時(shí),通常需要前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的功能,以提升用戶體驗(yàn)和安全性,以下是一個(gè)簡(jiǎn)單的前端實(shí)現(xiàn),演示了如何在用戶點(diǎn)擊發(fā)送驗(yàn)證碼按鈕時(shí)觸發(fā)短信驗(yàn)證碼的發(fā)送,并開(kāi)始一個(gè)倒計(jì)時(shí)2024-04-04
Element-ui table中過(guò)濾條件變更表格內(nèi)容的方法
下面小編就為大家分享一篇Element-ui table中過(guò)濾條件變更表格內(nèi)容的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
在?Vue?開(kāi)發(fā)中,父子組件間的通信是高頻場(chǎng)景,當(dāng)需要在父組件中直接調(diào)用子組件的方法時(shí),模板引用（Template?Refs）是最直接的解決方案,本文將通過(guò)一段?Vue?3?代碼片段,深入剖析如何通過(guò)?TypeScript?實(shí)現(xiàn)類(lèi)型安全的子組件實(shí)例訪問(wèn),需要的朋友可以參考下2025-03-03
Vue使用v-bind動(dòng)態(tài)綁定CSS樣式
這篇文章給大家介紹了Vue使用v-bind動(dòng)態(tài)綁定CSS樣式,文中有相關(guān)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02