vite 创建vue项目

初始化工程

npm init @vitejs/app 项目名
or
yarn create @vitejs/app 项目名

配置vite.config.js文件

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

// https://vitejs.dev/config/
export default defineConfig({
  // 插件配置
  plugins: [vue()],
  server: {
    // 自动在浏览器打开
    open: true,
    // 端口号
    port: 8848,
    // 反向代理配置
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:9000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },
  //设置的别名 
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      'utils': resolve(__dirname, './src/utils'),
      'components': resolve(__dirname, './src/components')
    }
  },
   //打包配置
  build: {
    // 浏览器兼容性  esnext|modules
    target: 'modules',
    // 指定输出路径
    outDir: 'dist/varlet-vue',
    // 指定生成静态资源的存放路径
    assetsDir: 'assets',
    // 混淆器，terser构建后文件体积更小
    minify: 'terser',
    // 代码压缩配置
    terserOptions: {
      // 生产环境移除console
      compress: {
        drop_console: true,
        drop_debugger: true,
      }
    }
  },
  // css配置
  css: {
    // css预处理器
    // 需要先添加less依赖
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${resolve('src/assets/style/index.less')}";`,
        },
        javascriptEnabled: true
      }
    }
  }
})

命令

// 启动项目
yarn dev
or
npm run dev

// 打包
yarn build
or
npm run build