vite3使用指南,小白再也不用担心项目配置问题了

npm create vite@latest

yarn create vite

pnpm create vite

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

.env.development		# 开发模式
.env.production			# 生产模式
.env.test						# 测试模式

console.log('获取当前目录',process.cwd());
//参数：模式：development||production,入口文件，修改.env变量前缀
const env=loadEnv('development',process.cwd(),'wmq')
console.log(env);

VITE_BASE_API=base/api	这个可以被访问到
wmq_client='aa🤔'。访问不了

import { defineConfig } from "vite";
export default defineConfig( {
  envDir:"env"
});

export default defineConfig({
  server: {
    host: 'localhost',//  开放服务器启动的地址，默认时localhost
    port: 9000,//项目启动端口
    open: true,//项目启动时是否打开浏览器
    base:'/',//用于代理 Vite 作为子文件夹时使用。
    cors: true,//为开发服务器配置 CORS。默认启用并允许任何源，传递一个 选项对象 来调整行为或设为 false 表示禁用。
    headers:{},//指定服务端响应的headers信息
    strictPort:true,//设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口。
    proxy: {//配置后端代理
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',//指向后端地址
        changeOrigin: true,//允许跨域
        rewrite: (path) => path.replace(/^/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/fallback/, '')
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      },
      // Proxying websockets or socket.io
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }，
  }
})

export default defineConfig({
  //css配置
  css: {
    // 开发模式为true，生产模式为flase, devSourcemap:true,//源代码映射
    devSourcemap:command === 'serve',
    // css模块化配置项
    modules:{
      // 是否开启模块化。模块化or全局化
      scopeBehaviour: 'global' | 'local',
      // css模块化的路径
      globalModulePaths: RegExp[],
      // 更改生成的哈希名称，一个字符串模板或者通过函数返回
      generateScopedName: string| ((name, filename, css) => string),
      // 生成hash名称的前缀
      hashPrefix: string,
      // 修改生成的配置对象的key的展示形式(驼峰还是中划线形式)
      localsConvention:'camelCase'
        | 'camelCaseOnly'
        | 'dashes'
        | 'dashesOnly'
        | null
    },
    // 预处理器配置项
    preprocessorOptions: {
      less: {
        math: "always",
      },
      scss: {
        additionalData: '@import "src/assets/styles/var.scss";'
      }
    },
    
    postcss:{
      // 一些配置
    }

  }
})

export default defineConfig({
  resolve:{
        alias:{
            '@': resolve(__dirname, 'src')//配置别名
        }
    }
})

brotliSize: false,//vite2
reportCompressedSize:false //vite3

plugins: [vue(),
      viteCompression({
        //生成压缩包gz
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: 'gzip',
        ext: '.gz',
    }),],

build:{
  ...
  terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
  }
}