Yang

Appearance

Vite 配置 ​

为开发提供极速响应 根目录 vite.config.ts 配置文件

路径别名 ​

文件使用方式~/view/demo.vue

ts
export default defineConfig({
  resolve: {
    alias: { 
      '~/': `${pathSrc}/`,
      '_c': `${pathSrc}/components`,
      '_v': `${pathSrc}/views`,
    },
  },
})
export default defineConfig({
  resolve: {
    alias: { 
      '~/': `${pathSrc}/`,
      '_c': `${pathSrc}/components`,
      '_v': `${pathSrc}/views`,
    },
  },
})

插件 ​

@vitejs/plugin-vue 提供 Vue 3 单文件组件支持

unplugin-vue-components 自动引入组件插件

ts
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({ 
      extensions: ['vue', 'md'],
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [
        // 自动导入 Element Plus 组件
        ElementPlusResolver({
          importStyle: 'sass',
        }),
      ],
      dts: 'src/components.d.ts',
    }),
  ]
})
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({ 
      extensions: ['vue', 'md'],
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [
        // 自动导入 Element Plus 组件
        ElementPlusResolver({
          importStyle: 'sass',
        }),
      ],
      dts: 'src/components.d.ts',
    }),
  ]
})

环境区分 ​

环境变量通常可以从 process.env 获得、相关配置文件

公共的开发环境生产环境预发布环境
.env.env.development.env.production.env.staging
ts
import { defineConfig, loadEnv } from 'vite'

const isDev = process.env.NODE_ENV === 'development' // 开发环境
const isPro = process.env.NODE_ENV === 'production' // 生产环境
const isStaging = process.env.NODE_ENV === 'staging' // 预发布环境

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `YANG_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite 配置
    define: {
      __APP_ENV__: env.APP_ENV
    }
  }
})
import { defineConfig, loadEnv } from 'vite'

const isDev = process.env.NODE_ENV === 'development' // 开发环境
const isPro = process.env.NODE_ENV === 'production' // 生产环境
const isStaging = process.env.NODE_ENV === 'staging' // 预发布环境

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `YANG_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite 配置
    define: {
      __APP_ENV__: env.APP_ENV
    }
  }
})

编译对应的模式

sh
$ vite build --mode [staging]
$ vite build --mode [staging]

Proxy 配置 ​

解决跨域问题

ts
export default defineConfig({
  server: {
    open: true,
    port: 1925,
    proxy: { 
      '/api': {
        target: loadEnv(mode, process.cwd(), 'YANG').YANG_BASE_URL,
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
})
export default defineConfig({
  server: {
    open: true,
    port: 1925,
    proxy: { 
      '/api': {
        target: loadEnv(mode, process.cwd(), 'YANG').YANG_BASE_URL,
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
})

多入口配置 ​

在构建过程中，你只需指定多个 .html 文件作为入口点即可

ts
export default defineConfig({
  build: {
    rollupOptions: { 
      input: {
        home: 'index.html',
        queue: 'queue.html',
      },
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      },
    },
  },
})
export default defineConfig({
  build: {
    rollupOptions: { 
      input: {
        home: 'index.html',
        queue: 'queue.html',
      },
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      },
    },
  },
})

全局scss变量 ​

ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "~/styles/element/index.scss" as *;', 
      },
    },
  },
})
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "~/styles/element/index.scss" as *;', 
      },
    },
  },
})