vue2+vite环境搭建

Vue2

Vue2为开发主流，而vite为新一代打包工具，采用vue2 + vite构建

项目初始化

npm create vite@latest

此时会提示你安装最新的vite，技术栈选择vue，会默认下载最新版vue3

输入项目名称，例如demo，会自动生成相应名称文件夹

cd demo
npm i

删除原有的vue3依赖

npm uninstall @vitejs/plugin-vue -D

安装vite-plugin-vue2依赖

npm i vite-plugin-vue2 -D

修改vue版本由3改为2版本

npm i vue@2 -S

模块依赖安装

npm i qs
npm i axios
npm i vue-router@3.5.2 //与vue2兼容
npm i element-ui

文件改动

vite.config.js

import {
    defineConfig } from 'vite'
import {
    createVuePlugin } from "vite-plugin-vue2";

export default defineConfig({
   
  plugins: [
    createVuePlugin()
  ],
  resolve: {
   
    /* 添加alias规则 */
    alias: [
      {
   
        find: '@/',
        replacement: '/src/'
      }
    ],
    /* 暂时先加.vue, .js, .json */
    extensions: [".vue", ".js", ".json"],
  },
  return:{
   
    base:'/'
  },
  build: {
   
    rollupOptions: {
   
      output: {
    //静态资源分类打包
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        <