工程化vite+vue2打包配置文件配置表

【前端工程化】vue2+webpack3项目迁移vite2踩坑总结 - 知乎

打开vite官网,按照官网提示创建新的vite项目(由于原先项目没有用ts，所以创建项目不选ts版本，包管理工具也依然选择是npm)。

npm init vite@latest my-vue-app -- --template vue

1. 把create创建vue的src整个复制粘贴到基于vite对的项目中
2. 把create创建的package.js中的

 创建完成后，使用vs code打开，打开命令行，执行npm i安装依赖

npm i

安装依赖完成后，使用npm run dev启动项目

npm run dev

第二步,安装vite-plugin-vue2依赖

npm install vite-plugin-vue2 -D

配置依赖生成

 

配置vite.config.js配置文件  注意base的路径！！！！

 配置vite支持vue2

@vitejs/plugin-vue插件是对vue3语法做支持，如果要支持vue2，需要用vite-plugin-vue2

第一步，从vite中删除@vitejs/plugin-vue配置，从package.json文件中也删除。

npm uninstall @vitejs/plugin-vue -D

/*
 * @Author: zhoufayang zhoufayang@bzfar.com
 * @Date: 2022-06-02 12:07:44
 * @LastEditors: zhoufayang zhoufayang@bzfar.com
 * @LastEditTime: 2022-10-23 18:03:04
 * @FilePath: \fa\vite.config.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import {
  defineConfig,
  loadEnv
} from 'vite'
import {
  createVuePlugin
} from "vite-plugin-vue2";
import legacyPlugin from '@vitejs/plugin-legacy'
import viteCompression from 'vite-plugin-compression'
// vue3 所需要的插件
// import Components from 'unplugin-vue-components/vite'
// import AutoImport from 'unplugin-auto-import/vite'
// import {
//   ElementPlusResolver
// } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  server: {
    port: 8080,
    host: "localhost",
    // 是否自动在浏览器打开
    open: true,
    // 是否开启 https
    https: false,
    proxy: {
      '/api': {
        // target: 'https://blog.csdn.net/weixin_45292658',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  plugins: [
    // IE和旧版chrome兼容
    legacyPlugin({
      targets: ['chrome 52'], // 需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
    }),
    createVuePlugin({
      vueTemplateOptions: {},
    }),
    // gzip静态资源压缩
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    })
  ],
  base: './',
  resolve: {
    // /* 暂时先加.vue, .js, .json */
    // extensions: [".vue", ".js", ".json"],
    extensions: [".vue", ".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
    /* 添加alias规则 */
    alias: [{
      find: '@/',
      replacement: '/src/'
    }],
  },
  build: {
    // 清除console和debugger
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    // chunkSizeWarningLimit: 1500,大文件报警阈值设置,不建议使用
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        // 超大静态资源拆分
        manualChunks(id) { //静态资源分拆打包
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
})

修改package.json中配置文件