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: []

  }

})

巴特西

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

最新文章

热门文章