vue-cli升级到vite（vue2升级到vue3）

老项目升级，遇到的几个问题和升级要点
老项目
"vue": "^2.5.17",
"@vue/cli-service": "^3.0.5",

新项目
"vite": "^3.0.0",
"vue": "^3.2.37",

新建项目

重新建立一个项目，使用vite生成项目；然后添加所用的依赖
1、yarn create vite my-vue-app --template vue

2. 添加 axios、vue-router、vuex、vant、clipboard等；

组件引入

在vite中，默认在导入组件时是不支持省略.vue，所以要把路径补全；

// 之前 (Vue 2.x)
import cart from './cart'

// 之后 (Vue 3.x)
import cart from './cart/index.vue'

vue.prototype

使用globalProperties
添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突时具有优先权。
这可以代替 Vue 2.x 的 Vue.prototype 扩展：

// 之前 (Vue 2.x)
Vue.prototype.$http = () => {}

// 之后 (Vue 3.x)
const app = createApp({})
app.config.globalProperties.$http = () => {}

环境变量

使用.env文件，将原先的 VUE_ 开头的变量使用 VITE_ 进行替换，需要注意，无法直接在vite.config.js文件中直接使用环境变量，需要使用 loadEnv 处理

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default ({ mode }) => {
  const VITE_APP_ENV_TITLE = loadEnv(mode, process.cwd()).VITE_APP_ENV_TITLE;
  const VITE_APP_BASE = loadEnv(mode, process.cwd()).VITE_APP_BASE;
  console.log({
    NODE_ENV: process.env.NODE_ENV || 'development',
    VITE_APP_ENV_TITLE: VITE_APP_ENV_TITLE,
    VITE_APP_BASE: VITE_APP_BASE,
  });

  return defineConfig({
    plugins: [
      vue(),
      Components({
        resolvers: [VantResolver()],
      }),
    ],
    base: VITE_APP_BASE,
    server: {
      // 设置默认端口
      port: 8083,
      // 设置代理
      proxy: {
        '/mobile_web_shopkeeper': {
          // 目标 API 地址
          target: 'https://baidu.com.cn',
          changeOrigin: true,
          pathRewrite: {
            '^/mobile_web_shopkeeper': '/mobile_web_shopkeeper',
          },
        },
      },
    },
    resolve: {
      alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
    },
  });
};

require

不能使用 require ,需要用 import { resolve } from 'path'; 代替。

// 之前 (Vue 2.x)
const {resolve} = require('path');

// 之后 (Vue 3.x)
import { resolve } from 'path';

import Vue from "vue";

vue3 不再导出 vue，需要使用实例对象，如果原来的代码里面有使用，需要删除；

// 之前 (Vue 2.x)
import Vue from "vue";

// 之后 (Vue 3.x)
// import Vue from "vue";

vue-router

1. 将new Router 改成 createRouter
2. 将mode: "history", 改为 history: createWebHistory(),

// 之前 (Vue 2.x)
import Router from "vue-router";

const router = new Router({
  mode: "history",
  routes:[]
});

// 之后 (Vue 3.x)
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes:[],
});

vuex

将 new Vuex.Store 改为 createStore

// 之前 (Vue 2.x)
import Vuex from 'vuex'
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

// 之后 (Vue 3.x)
import { createStore } from 'vuex';
export default createStore({
  state,
  mutations,
  actions,
  getters,
});