Vue3?vite配置css?的sourceMap及文件引用配置別名的過程

更新時間：2023年07月06日 11:31:36 作者：任磊abc

這篇文章主要介紹了Vue3 vite配置css的sourceMap,及文件引用配置別名的過程，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

Vite 2.9配置瀏覽器加載 CSS 源映射

vite.config.ts，有一個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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實現(xiàn)手機端省市區(qū)區(qū)域選擇
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)手機端省市區(qū)區(qū)域選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
vue+vant實現(xiàn)商品列表批量倒計時功能
這篇文章主要介紹了vue+vant實現(xiàn)商品列表批量倒計時功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-01-01
UniApp中實現(xiàn)類似錨點定位滾動效果
一個uniapp小程序的項目,我們需要實現(xiàn)一個非常實用的功能——類似于錨點定位的交互效果,即在首頁中有多個tab（分類標(biāo)簽）,每個tab對應(yīng)著不同的模塊,當(dāng)用戶點擊某個分類的tab時,需要流暢地滾動到對應(yīng)的內(nèi)容位置,提供更好的用戶體驗,
2023-10-10
深入了解Vue中雙向數(shù)據(jù)綁定原理
vue是一個mvvm框架，即數(shù)據(jù)雙向綁定，即當(dāng)數(shù)據(jù)發(fā)生變化的時候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時候，數(shù)據(jù)也會跟著同步變化。本文將通過示例詳解其中原理，需要的可以參考一下
2022-05-05
在vue中動態(tài)添加class類進行顯示隱藏實例
今天小編就為大家分享一篇在vue中動態(tài)添加class類進行顯示隱藏實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件
這篇文章主要介紹了如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
使用Vue純前端實現(xiàn)發(fā)送短信驗證碼并實現(xiàn)倒計時
在實際的應(yīng)用開發(fā)中,涉及用戶登錄驗證、密碼重置等場景時,通常需要前端實現(xiàn)發(fā)送短信驗證碼的功能,以提升用戶體驗和安全性,以下是一個簡單的前端實現(xiàn),演示了如何在用戶點擊發(fā)送驗證碼按鈕時觸發(fā)短信驗證碼的發(fā)送,并開始一個倒計時
2024-04-04
Element-ui table中過濾條件變更表格內(nèi)容的方法
下面小編就為大家分享一篇Element-ui table中過濾條件變更表格內(nèi)容的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
在Vue3中安全訪問子組件的示例代碼
在?Vue?開發(fā)中,父子組件間的通信是高頻場景,當(dāng)需要在父組件中直接調(diào)用子組件的方法時,模板引用（Template?Refs）是最直接的解決方案,本文將通過一段?Vue?3?代碼片段,深入剖析如何通過?TypeScript?實現(xiàn)類型安全的子組件實例訪問,需要的朋友可以參考下
2025-03-03
Vue使用v-bind動態(tài)綁定CSS樣式
這篇文章給大家介紹了Vue使用v-bind動態(tài)綁定CSS樣式,文中有相關(guān)的代碼示例供大家參考,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-02-02