vue3+vite使用记录

动态加载图片

<script setup>
import { ref, reactive, computed } from 'vue'

const nav_list = reactive(['img.jpg', 'img1.jpg', 'img2.jpg'])

const getImageUrl = (name) => {
  return new URL(`../assets/icon/${name}`, import.meta.url).href
}
</script>

<template>
    <main>
      <div class="nav-item" v-for="(item, index) in nav_list" :key="index">
        <img :src="getImageUrl(item)" />
      </div>
    </main>
</template>

打包后assets下创建类型文件

vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  plugins: [
    vue()
  ],
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
      }
    }
  }
})

获取dom方法

注：nextTick(() => {})写法里面的箭头函数不能省

<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue'

const tableData = reactive([{date:'2023-02-03'}, {date:'2023-02-05'}])

const table_box = ref([])
const setBoxRef = (el) => {
  table_box.value.push(el)
}

onMounted(async () => {
  await nextTick(() => {})
  console.log(table_box.value)
  console.log(table_box.value.$el.children)
})
</script>

<template>
    <main>
      <el-table :data="tableData">
        <el-table-column prop="date" label="时间轴">
          <template #default="scope">
            <div :ref="setBoxRef" style="width: 650px; height: 45px">{{ scope.row.date }}</div>
          </template>
        </el-table-column>
      </el-table>
    </main>
</template>

vite配置内网IP访问

vite.config.js

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

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },

  server: {
    // 配置内网IP访问
    host: '0.0.0.0'
  }
})

参考：https://www.jb51.net/javascript/286011p89.htm 

 vite配置代理

vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },

  server: {
    // 代理
    proxy: {
      '/api': {
        target: 'http://192.168.1.1:8080/',
        changeOrigin: true
      }
    }
  }
})

 vite打包后去除console.log()

安装插件：vite-plugin-remove-console

npm install vite-plugin-remove-console -D

 vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import removeConsole from 'vite-plugin-remove-console'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), removeConsole()],
  base: './',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

更多配置参考：vite-plugin-remove-console - npm

 vue3项目使用keepAlive缓存

 vue3项目keepAlive使用方法详解_vue.js_脚本之家