老項(xiàng)目升級(jí)，遇到的幾個(gè)問題和升級(jí)要點(diǎn)
老項(xiàng)目
"vue": "^2.5.17",
"@vue/cli-service": "^3.0.5",

新項(xiàng)目
"vite": "^3.0.0",
"vue": "^3.2.37",

新建項(xiàng)目

重新建立一個(gè)項(xiàng)目，使用vite生成項(xiàng)目；然后添加所用的依賴
1、yarn create vite my-vue-app --template vue

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

組件引入

在vite中，默認(rèn)在導(dǎo)入組件時(shí)是不支持省略.vue，所以要把路徑補(bǔ)全；

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

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

vue.prototype

使用globalProperties
添加一個(gè)可以在應(yīng)用的任何組件實(shí)例中訪問的全局 property。組件的 property 在命名沖突時(shí)具有優(yōu)先權(quán)。
這可以代替 Vue 2.x 的 Vue.prototype 擴(kuò)展：

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

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

環(huán)境變量

使用.env文件，將原先的 VUE_ 開頭的變量使用 VITE_ 進(jìn)行替換，需要注意，無法直接在vite.config.js文件中直接使用環(huán)境變量，需要使用 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: {
      // 設(shè)置默認(rèn)端口
      port: 8083,
      // 設(shè)置代理
      proxy: {
        '/mobile_web_shopkeeper': {
          // 目標(biāo) 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 不再導(dǎo)出 vue，需要使用實(shí)例對(duì)象，如果原來的代碼里面有使用，需要?jiǎng)h除；

// 之前 (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,
});