快捷導(dǎo)航

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

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

這篇文章主要介紹了Vue3 vite配置css的sourceMap,及文件引用配置別名的過程，本文結(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重構(gòu)資訊頁(yè)面的實(shí)例代碼解析
這篇文章主要介紹了使用vue重構(gòu)資訊頁(yè)面的實(shí)例代碼解析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
Jeeplus-vue?實(shí)現(xiàn)文件的上傳功能
這篇文章主要介紹了Jeeplus-vue?實(shí)現(xiàn)文件的上傳，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-09-09
vue項(xiàng)目運(yùn)行或打包時(shí),頻繁內(nèi)存溢出情況問題
這篇文章主要介紹了vue項(xiàng)目運(yùn)行或打包時(shí)，頻繁內(nèi)存溢出情況的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
基于 Vue 3 + Element Plus自定義時(shí)間范圍選擇組件使
本文介紹了一個(gè)基于Vue 3和Element Plus的自定義時(shí)間范圍選擇組件,該組件提供雙向綁定的開始時(shí)間和結(jié)束時(shí)間選擇,支持常用快捷選項(xiàng),對(duì)vue elementplus時(shí)間范圍選擇組件相關(guān)知識(shí)感興趣的朋友一起看看吧
2025-07-07
使用?Vue3?實(shí)現(xiàn)文章目錄功能
本文給大家分享如何使用vue3實(shí)現(xiàn)文章目錄功能，特色功能主要是自動(dòng)高亮選中當(dāng)前正在閱讀的章節(jié)，自動(dòng)展開當(dāng)前正在閱讀的章節(jié)的子標(biāo)題，并隱藏其他章節(jié)的子標(biāo)題，代碼簡(jiǎn)單易懂，感興趣的朋友跟隨小編一起看看吧
2022-03-03
vue中的公共方法調(diào)用方式
這篇文章主要介紹了vue中的公共方法調(diào)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
通過npm或yarn自動(dòng)生成vue組件的方法示例
這篇文章主要介紹了通過npm或yarn自動(dòng)生成vue組件的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-02-02
vue2.0 兄弟組件(平級(jí))通訊的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue2.0 兄弟組件(平級(jí))通訊的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-01-01
Vue0.1的過濾代碼如何添加到Vue2.0直接使用
Vue0.1的過濾代碼如何添加到Vue2.0直接使用，這篇文章主要介紹了過濾代碼添加到Vue2.0用的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
Vue實(shí)現(xiàn)boradcast和dispatch的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)boradcast和dispatch的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-11-11