【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', '')
      }
    } */
  });
};