Vue3 vite配置css 的sourceMap及文件引用配置别名的过程

 更新时间:2023年07月06日 11:31:36   作者:任磊abc  
这篇文章主要介绍了Vue3 vite配置css的sourceMap,及文件引用配置别名的过程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

Vite 2.9配置浏览器加载 CSS 源映射

vite.config.ts,有一个devSourcemap属性css可以设置为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', '')
      }
    } */
  });
};

到此这篇关于Vue3 vite配置css 的sourceMap ,以及文件引用配置别名的文章就介绍到这了,更多相关Vue3 vite配置sourceMap内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用vue重构资讯页面的实例代码解析

    使用vue重构资讯页面的实例代码解析

    这篇文章主要介绍了使用vue重构资讯页面的实例代码解析,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Jeeplus-vue 实现文件的上传功能

    Jeeplus-vue 实现文件的上传功能

    这篇文章主要介绍了Jeeplus-vue 实现文件的上传,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • vue项目运行或打包时,频繁内存溢出情况问题

    vue项目运行或打包时,频繁内存溢出情况问题

    这篇文章主要介绍了vue项目运行或打包时,频繁内存溢出情况的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 基于 Vue 3 + Element Plus自定义时间范围选择组件使用教程

    基于 Vue 3 + Element Plus自定义时间范围选择组件使

    本文介绍了一个基于Vue 3和Element Plus的自定义时间范围选择组件,该组件提供双向绑定的开始时间和结束时间选择,支持常用快捷选项,对vue elementplus时间范围选择组件相关知识感兴趣的朋友一起看看吧
    2025-07-07
  • 使用 Vue3 实现文章目录功能

    使用 Vue3 实现文章目录功能

    本文给大家分享如何使用vue3实现文章目录功能,特色功能主要是自动高亮选中当前正在阅读的章节,自动展开当前正在阅读的章节的子标题,并隐藏其他章节的子标题,代码简单易懂,感兴趣的朋友跟随小编一起看看吧
    2022-03-03
  • vue中的公共方法调用方式

    vue中的公共方法调用方式

    这篇文章主要介绍了vue中的公共方法调用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 通过npm或yarn自动生成vue组件的方法示例

    通过npm或yarn自动生成vue组件的方法示例

    这篇文章主要介绍了通过npm或yarn自动生成vue组件的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue2.0 兄弟组件(平级)通讯的实现代码

    vue2.0 兄弟组件(平级)通讯的实现代码

    这篇文章主要介绍了vue2.0 兄弟组件(平级)通讯的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01
  • Vue0.1的过滤代码如何添加到Vue2.0直接使用

    Vue0.1的过滤代码如何添加到Vue2.0直接使用

    Vue0.1的过滤代码如何添加到Vue2.0直接使用,这篇文章主要介绍了过滤代码添加到Vue2.0用的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vue实现boradcast和dispatch的示例

    Vue实现boradcast和dispatch的示例

    这篇文章主要介绍了Vue实现boradcast和dispatch的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-11-11

最新评论