vue3.0+vite+ts項目搭建--vite.config.ts配置(三)

vite.config.ts配置

配置路徑處理模塊

安裝ts的類型聲明文件

yarn add @types/node -D

通過配置alias來定義路徑的別名

resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@coms': path.resolve(__dirname, 'src/components')
    }
  }

配置自動在瀏覽器打開

server: {
    open: true
  }

 配置scss全局變量

安裝依賴

npm install node-sass sass-loader sass -D

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/scss/_theme.scss";`
      }
    }
  }

 vite.config.ts中雖然不對報錯但是process.env參數中沒有.env配置文件中的參數

配置按需加載

 

import styleImport from 'vite-plugin-style-import'
plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'vant',
        esModule: true,
        resolveStyle: (name) => {
          return `vant/es/${name}/style/css`;
        },
      }]
    })
  ]

 

 

完整配置文件如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import styleImport from 'vite-plugin-style-import'
import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
// 路徑處理模塊
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // styleImport({
    //   libs: [{
    //     libraryName: 'vant',
    //     esModule: true,
    //     resolveStyle: (name) => {
    //       return `vant/es/${name}/style/css`;
    //     },
    //   }]
    // }),
    importToCDN({
      modules: [
        autoComplete('vue'),
        autoComplete('axios'),
        autoComplete('lodash'),
        {
          name:'vue',
          var:'Vue',
          path:'https://cdn.jsdelivr.net/npm/vue@next'
        },
        {
            name:'vuex',
            var:'Vuex',
            path:'https://cdn.jsdelivr.net/npm/vuex@4.0.2/dist/vuex.global.prod.js'
        },
        {
            name:'vue-router',
            var:'VueRouter',
            path:'https://cdn.jsdelivr.net/npm/vue-router@4.0.10/dist/vue-router.global.prod.js'
        },
        {
          name:'vant',
          var:'vant',
          css: 'https://cdn.jsdelivr.net/npm/vant@next/lib/index.css',
          path:'https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js'
        }
      ]
    })
  ],
  resolve: {
    // 定義別名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        charset: false,
        additionalData: `@import "@/assets/scss/_theme.scss";`
      },
      less: {
        javascriptEnabled: true
      }
    }
  },
  build: {
    target: 'modules',
    outDir: 'dist', // 指定輸出路徑
    assetsDir: 'static', // 指定生成靜態資源的存放路徑
    minify: 'terser', // 混淆器,terser構建后文件體積更小
    sourcemap: false,
    terserOptions: {
      compress: {
        drop_console: true, // 生產環境移除console
        drop_debugger: true // 生產環境移除debugger
      }
    },
    rollupOptions: {
      treeshake: false,
      output: {
        manualChunks (id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }
      }
    }
  },
  server: {
    open: true, // 是否在瀏覽器打開
    port: 8088, // 端口號
    host: 'local.xxx.com'
  },
  // 引入第三方配置
  optimizeDeps: {
    include: []
  }
})