Vue3 + Vite项目实战：常见问题与解决方案全解析

<img src="@/assets/logo.png" >

let list=[
  "/src/assets/logo.png",
  "/src/assets/logo.png",
]
// 这个地方的数据如果不用/src，那么本地直接报错。
// 如果是vue3+webpack可以使用require引入，但vite没有require

<div v-for="item in list" :key="item">
  <img :src="item" >
</div>

import homeIcon from '@/assets/images/home/home_icon.png'

<img :src="homeIcon" />

let list=[
  new URL("@/assets/logo.png", import.meta.url).href,
  new URL("@/assets/logo.png", import.meta.url).href,
]

<div v-for="item in list" :key="item">
  <img :src="item" >
</div>

import zipPack from "vite-plugin-zip-pack"
export default defineConfig({
  plugins: [
    vue(),
    zipPack({
      inDir: 'dist',//要打包的文件夹
      outDir: 'dist',//打包好的 zip 文件放到哪个文件夹下
      outFileName: `dist.zip`,// 打包好的文件名
      pathPrefix: ''
  }),
  ],
})

export default defineConfig({
  build：{
      rollupOptions：{
          output: {
            // entry部分的文件命名，我们这里是spa,所以entry写死也没事,多入口的话需要注意了
            entryFileNames: "assets/js/[name]-[hash].js",
            // 自定义chunk如何命名法，包含懒加载或者自定义分包的一些内容的命名
            chunkFileNames: "assets/js/[name]-[hash].js",
            // 除js之外其他资源的存放
            assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
            // 这里注意一下中括号里面的东西都是占位符
          }
      }
  }
})

export default defineConfig({
  build：{
      rollupOptions：{
            // 我们这里测试一下,将vue全家桶放在一个公共chunk之中
            manualChunks:{
              vueall:["vue","vue-router","vuex"]
            }
      }
  }
})

export default defineConfig({
  build：{
      rollupOptions：{
            manualChunks(id) {
                if (id.includes('vant') || id.includes('vue-router')) {
                  return 'vendor';
                }
                if (id.includes('node_modules')) {
                  return 'dependencies';
                }
            },
      }
  }
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  // 插件部分
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  //构建部分,该部分涉及到打包的相关内容
  build:{
    // target指的是js的兼容版本，默认是['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']
    // 相关值可以是一个es版本(最低支持es2015)，或者相关的流浪器版本
    // 该部分任务由esbuild完成
    target:"es2015",
    // 打包之后的文件放的文件夹，该部分其实根据项目不一样是不一样的
    outDir:"dist",
    //内联资源限制，图片等资源的请求需要http请求，小于该值的资源可以直接转成base64之后,默认是4kb
    assetsInlineLimit:4096,
    //懒加载组件之中的css分离，默认是true，css内联到对应的组件中，false的话项目中用到的css全放到一个css文件中
    cssCodeSplit:true,
    // cssTarget该熟悉是针对非主流浏览器使用，给css添加一个转换目标，类似target属性
    // cssMinify css的最小化压缩方式，我不是很懂，但应该和合并同类项类似
    // sourcemap:true是否储存sourcemap文件，这个文件记载着js源码和打包后代码的位置关系，方便定位出错，我暂时不知道有什么用
    // chunkSizeWarningLimitchunk大小限制，会和未压缩之前的chunk大小进行比较，有chunk超过这个值会报警，默认500kb
    // assetsDir静态资源的存放位置，默认是assets，注意这个静态资源包含了除js之外的其他内容
    assetsDir:"assets",
    // rollupOptions
    // vite使用rollup实现打包，这就是写具体配置的地方,为父没用过，先看一下
    rollupOptions:{
      // input不写其实啥事都没有,写的话，spa单页面必须注意要把html页面写进去否则不产生html页面
      // input:["./src/main.js",'./index.html'],
      // 出口，这里就涉及比较多的内容
      output:{
        // entry部分的文件命名，我们这里是spa,所以entry写死也没事,多入口的话需要注意了
        entryFileNames: "assets/js/[name]-[hash].js",
        // 自定义chunk如何命名法，包含懒加载或者自定义分包的一些内容的命名
        chunkFileNames: "assets/js/[name]-[hash].js",
        // 除js之外其他资源的存放
        assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
        // 这里注意一下中括号里面的东西都是占位符
        // compact用于压缩rollup产生的临时代码
        compact: true,
        // 其他的一些内容
        // external哪些模块被排除在打包之外,我感觉cdn的引入应该挺需要使用这个
        // manualChunks自定义公共chunk,在多入口的时候很有用
        // 我们这里测试一下,将vue全家桶放在一个公共chunk之中
        manualChunks:{
          vueall:["vue","vue-router","vuex"]
        }
      },
      // 设置为true之后,后续打包的时候只对更改的模块重新分析,加快打包速度
      cache:true
    }
  }
})

const tableData = reactive([]);
 
const getData = () => {
  const res = [{userId: 1},{userId: 2},{userId: 3},{userId: 4}]; //假设请求接口返回的数据
  // 方法1 失败，直接赋值丢失了响应性
  tableData = res;

  // 方法2 这样也是失败
  tableData.concat(res);
};

const tableData = reactive([]);
const getData = () => {
  const res = [{userId: 1},{userId: 2},{userId: 3},{userId: 4}]; //假设请求接口返回的数据
  res.forEach(item => {
     tableData.push(item);
  });
};

const tableData = reactive([])
const getData = () => {
  const res = [{userId: 1},{userId: 2},{userId: 3},{userId: 4}]; //假设请求接口返回的数据
  tableData.push(...res);
};

const tableData = reactive({
    listData:[]
})
const getData = () => {
  const res = [{userId: 1},{userId: 2},{userId: 3},{userId: 4}]; //假设请求接口返回的数据
  tableData.listData = res;
};

const person = reactive({name:'张三',age:18})
const getData = () => {
  const res = {name:'李四',age:20}; //假设请求接口返回的数据
  Object.assign(person ,res)
};

const person = ref({name:'张三',age:18})
const getData = () => {
  const res = {name:'李四',age:20}; //假设请求接口返回的数据
  person.value = res
};