老项目升级，遇到的几个问题和升级要点
老项目
"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
- 添加 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
- 将
new Router改成createRouter - 将
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,
});
