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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 5个可以加速开发的VueUse函数库(小结)

    5个可以加速开发的VueUse函数库(小结)

    VueUse为Vue开发人员提供了大量适用于Vue2和Vue3的基本Composition API 实用程序函数。具有一定的参考价值,感兴趣的可以了解一下
    2021-11-11
  • Vue组件通信方法案例总结

    Vue组件通信方法案例总结

    这篇文章主要介绍了Vue组件通信方法案例总结,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • vue-cli 2.*中导入公共less文件的方法步骤

    vue-cli 2.*中导入公共less文件的方法步骤

    这篇文章主要介绍了vue-cli 2.*中导入公共less文件的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • WEB前端性能优化的7大手段详解

    WEB前端性能优化的7大手段详解

    本文将详细介绍前端性能优化的7大手段,包括减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化
    2020-02-02
  • Vue3+El-Plus实现表格行拖拽功能完整代码

    Vue3+El-Plus实现表格行拖拽功能完整代码

    在vue3+elementPlus网站开发中,详细完成el-table表格的鼠标拖拽/拖曳/拖动排序,下面这篇文章主要给大家介绍了关于Vue3+El-Plus实现表格行拖拽功能的相关资料,需要的朋友可以参考下
    2024-05-05
  • el-form表单el-form-item验证规则里prop一次验证两个或多个值问题

    el-form表单el-form-item验证规则里prop一次验证两个或多个值问题

    这篇文章主要介绍了el-form表单el-form-item验证规则里prop一次验证两个或多个值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 使用md5在vue中的axios请求时加密API问题

    使用md5在vue中的axios请求时加密API问题

    这篇文章主要介绍了使用md5在vue中的axios请求时加密API问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 使用vue v-for循环图片路径方式

    使用vue v-for循环图片路径方式

    这篇文章主要介绍了使用vue v-for循环图片路径方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue密码登陆加密RSA实现方案

    Vue密码登陆加密RSA实现方案

    这篇文章主要介绍了Vue密码登陆加密RSA实现方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题

    Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题

    这篇文章主要介绍了Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06

最新评论