SoFunction
Updated on 2025-04-05

Vue3 vite to configure css’ sourceMap and file reference configuration alias

Vite 2.9 configurationBrowser loading CSS source map

, there is onedevSourcemappropertycssCan be set astrue

This isThe files I'm currently using:

export default defineConfig({
  plugins: [
    vue(),
    checker({
      typescript: true,
      vueTsc: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', )),
    },
  },
  css: {
    devSourcemap: true,
  },
});

Reference file configuration alias

export default ({ mode, command }) => {
  (command);
  // (mode);
  const boo = mode === 'dev';
  const alias = {
    '@': (__dirname, './src'),
    pages: (__dirname, './src/pages'),
    assets: (__dirname, './src/assets'),
    images: (__dirname, './src/assets/image'),
    store: (__dirname, './src/store'),
    plugins: (__dirname, './src/plugins'),
    components: (__dirname, './src/components')
  };
  // if (boo) {
  alias['vue-i18n'] = 'vue-i18n/dist/';
  // }
  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) => ('/api', '')
      }
    } */
  });
};

This is the article about Vue3 vite configuration css sourceMap and file reference configuration alias. For more related content on Vue3 vite configuration sourceMap, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!