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-09-09
  • vue+vant实现商品列表批量倒计时功能

    vue+vant实现商品列表批量倒计时功能

    这篇文章主要介绍了vue+vant实现商品列表批量倒计时功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • UniApp中实现类似锚点定位滚动效果

    UniApp中实现类似锚点定位滚动效果

    一个uniapp小程序的项目,我们需要实现一个非常实用的功能——类似于锚点定位的交互效果,即在首页中有多个tab(分类标签),每个tab对应着不同的模块,当用户点击某个分类的tab时,需要流畅地滚动到对应的内容位置,提供更好的用户体验,
    2023-10-10
  • 深入了解Vue中双向数据绑定原理

    深入了解Vue中双向数据绑定原理

    vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。本文将通过示例详解其中原理,需要的可以参考一下
    2022-05-05
  • 在vue中动态添加class类进行显示隐藏实例

    在vue中动态添加class类进行显示隐藏实例

    今天小编就为大家分享一篇在vue中动态添加class类进行显示隐藏实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 如何封装了一个vue移动端下拉加载下一页数据的组件

    如何封装了一个vue移动端下拉加载下一页数据的组件

    这篇文章主要介绍了如何封装了一个vue移动端下拉加载下一页数据的组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 使用Vue纯前端实现发送短信验证码并实现倒计时

    使用Vue纯前端实现发送短信验证码并实现倒计时

    在实际的应用开发中,涉及用户登录验证、密码重置等场景时,通常需要前端实现发送短信验证码的功能,以提升用户体验和安全性,以下是一个简单的前端实现,演示了如何在用户点击发送验证码按钮时触发短信验证码的发送,并开始一个倒计时
    2024-04-04
  • Element-ui table中过滤条件变更表格内容的方法

    Element-ui table中过滤条件变更表格内容的方法

    下面小编就为大家分享一篇Element-ui table中过滤条件变更表格内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 在Vue3中安全访问子组件的示例代码

    在Vue3中安全访问子组件的示例代码

    在 Vue 开发中,父子组件间的通信是高频场景,当需要在父组件中直接调用子组件的方法时,模板引用(Template Refs)是最直接的解决方案,本文将通过一段 Vue 3 代码片段,深入剖析如何通过 TypeScript 实现类型安全的子组件实例访问,需要的朋友可以参考下
    2025-03-03
  • Vue使用v-bind动态绑定CSS样式

    Vue使用v-bind动态绑定CSS样式

    这篇文章给大家介绍了Vue使用v-bind动态绑定CSS样式,文中有相关的代码示例供大家参考,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02

最新评论