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配置文件中的参数

sass升级以后安装依赖和配置改成如下所示:

 

?

1	npm install sass sass-loader -D

 

　　

css: {
    preprocessorOptions: {
      scss: {
        charset: false,
        additionalData(content, file) {
          if (file.includes('node_modules')) {
            return content
          }
          return `@use "@/assets/scss/_theme.scss" as *;`
        }
      }
    }
  },

 

 

配置按需加载

 

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

 新版本会用这种方式

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createStyleImportPlugin } from 'vite-plugin-style-import'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createStyleImportPlugin({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          default:false,
          resolveStyle: (name) => {
            return `vant/es/${name}/style/less.js`;
          }
        }
      ]
    })
  ],
  resolve: {
    // 定义别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        charset: false,
        additionalData(content, file) {
          if (file.includes('node_modules')) {
            return content
          }
          return `@use "@/assets/scss/_theme.scss" as *;`
        }
      }
    }
  },
  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, // 端口号
    // port: 8080, // 端口号
    host: 'local.qiaolu.com'
  },
  // 引入第三方配置
  optimizeDeps: {
    include: []
  }
})