别名配置与代理配置

别名配置

说明

用于配置某些文件夹的路径别名，如webpack中默认配置的'@'符号

EG

别名配置

手动配置的项目

js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { dirname } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  // 配置别名
  resolve:{
    alias: {
      '@': resolve(__dirname,'src/'),
      comps: resolve(__dirname,'src/components/'),
      pages: resolve(__dirname,'src/pages/'),
      utils: resolve(__dirname,'src/utils/'),
    },
  },
  plugins: [vue()]
})

自动生成的项目

npm create vue@3生成的项目

js
import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default ({mode,}) => {
  /**
   * 描述
   * @date 用于加载自定义的env环境
   * @param {any} 'mode': 模式，Vite启动时会自动传入启动时的指令中的参数
   * @param {any} 'process.cwd()'：返回Node.js进程的当前工作目录
   * @returns {any} 环境变量
   */
  const env = loadEnv(mode, process.cwd());
  return defineConfig({
    // 若是部署在二级目录，则基础路径需要更改；否则为'/'当前目录
    base: env.VITE_APP_BASE || '/',
    // 插件配置
    plugins: [vue()],
    // 路径解析
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        'comps': fileURLToPath(new URL('./src/components', import.meta.url)),
        'views': fileURLToPath(new URL('./src/views', import.meta.url)),
        'utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
      }
    },
    
  })
}

配置代理

js
    server: {
      host: '192.168.100.106',//设置服务启动时的IP地址，设置为0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址
      port: 9974,// 设置服务启动时的端口
      strictPort: true,// 严格按照指定端口启动服务，若是端口被占用就无法启动
      open: '/',// 服务启动后自动在浏览器打开应用且URL为此项设置的URL
      // 配置代理
      proxy: {
        // '/api'：代理对象，支持正则以'^'开头
        "/api": {
          target: "http://127.0.0.1:8334/",// 代理的目标
          changeOrigin: true,// 将主机头起点更改为代理目标的URL
          rewrite: (path) => path.replace(/^\/api/, ""),// 重写路径，替换为空
        },
      },
    },

插件配置

配置浏览器兼容插件

    npm add -D @vitejs/plugin-legacy

对应的vite.config.js配置

js
// 浏览器兼容插件配置
import legacy from '@vitejs/plugin-legacy'
...

// 插件配置
plugins: [
  vue(),
  // 配置浏览器兼容插件
  legacy({
    targets: ['defaults', 'not IE 11']
  })
],

其它配置项

vite.config.js初步配置EG

js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

// 浏览器兼容插件配置
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default ({commod, mode}) => {
  /**
   * 描述
   * @date 用于加载自定义的env环境
   * @param {any} 'mode': 模式，Vite启动时会自动传入启动时的指令中的参数
   * @param {any} 'process.cwd()'：返回Node.js进程的当前工作目录
   * @returns {any} 环境变量
   */
   // loadEnv(mode, process.cwd())一般为loadEnv(mode, './')
  const env = loadEnv(mode, process.cwd());
  return defineConfig({
    // 若是部署在二级目录，则基础路径需要更改；否则为'/'当前目录
    base: env.VITE_APP_BASE || '/',
    // 插件配置
    plugins: [
      vue(),
      // 配置浏览器兼容插件
      legacy({
        targets: ['defaults', 'not IE 11']
      })
    ],
    /*
     路径解析
     在搭配ts使用时，还需要同步在tsconfig.json的compilerOptions.paths中也同步配置
    */
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        'comps': fileURLToPath(new URL('./src/components', import.meta.url)),
        'views': fileURLToPath(new URL('./src/views', import.meta.url)),
        'utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
      }
    },
    // 用于设置以此项开头的需要暴露在客户端源码的环境变量，默认为'VITE';设置为空字符串时，所有环境变量都会暴露在客户端源码中，Vite会在检测后报错
    //envPrefix:[],
    server: {
      host: '192.168.100.106',//设置服务启动时的IP地址，设置为0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址
      port: 9974,// 设置服务启动时的端口
      strictPort: true,// 严格按照指定端口启动服务，若是端口被占用就无法启动
      open: '/',// 服务启动后自动在浏览器打开应用且URL为此项设置的URL
      // 配置代理
      proxy: {
        // '/api'：代理对象，支持正则以'^'开头
        "/api": {
          target: "http://127.0.0.1:8334/",// 代理的目标
          changeOrigin: true,// 将主机头起点更改为代理目标的URL
          rewrite: (path) => path.replace(/^\/api/, ""),// 重写路径，替换为空
        },
      },
    },
    // 构建选项
    build: {
      target: ['es2021', 'chrome100', 'safari13'],// 构建目标
      minify: 'esbuild',// 设置压缩混淆，默认为'esbuild'
      sourcemap: false,//构建后是否生成SourceMap文件
      // outDir:'dist',//指定输出目录, 默认为相对于根目录下的dist
      // assetsDir:'assets'.//指定静态资源存放目录，相对于outDir
      // chunkSizeWarningLimit:'400',//规定触发警告时的块大小(kbs为单位)
    },
  })
}