我有一个使用Vue.js 2.4 + TypeScript + RequireJS堆栈的项目，需要升级到最新的Vue.js。升级到Vue.js会破坏它，并且每个文档进行更改后我都无法解决。
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue.js Scratchpad</title>
<link rel="icon" type="image/png" href="favicon.png">
<meta charset="UTF-8">
<script src="node_modules/requirejs/require.js"></script>
</head>
<body>
<h1>Vue.js Scratchpad</h1>
<div v-show="true" id="app" style="display: none">
<input v-model="user" autofocus="true" placeholder="Enter any user name">
<!--<button @click.prevent="onRenderComponent">Render</button>-->
<p v-show="loading">Loading...</p>
<router-view v-show="!loading" :user="user"
@loading="onLoading" @success="onLoaded"
@loading-error="onLoadingError"></router-view>
</div>
<script>
requirejs.config({
// By default load modules from `./`
baseUrl: '.',
/*
By default, modules would be loaded from {module}.js files (filename = module).
Specify {module} (or "{module}"): "{filepath_no_extension}" mapping if filename != module.
Specify fall-backs ([filepath1, filepath2]) for minimized / normal version consumption pattern.
*/
paths: {
// All third-party libraries must be included here. Use path fall-backs for minimized libs.
axios: "node_modules/axios/dist/axios.min",
vue: "node_modules/vue/dist/vue.min",
"vue-router": "node_modules/vue-router/dist/vue-router.min"
}
});
require(["app-pure-vue.js"]);
</script>
</body>
</html>
app-pure-vue.ts：
import * as Vue from "vue";
import * as VueRouter from "vue-router";
import { AxiosError } from "axios";
//region App components
import MessageComponent from "./messageComponent-pure-vue";
//endregion
Vue.use(VueRouter);
const routes = [
{
path: "/",
component: MessageComponent
}
];
const router = new VueRouter({
routes
});
const appOptions = {
router,
data() {
return {
user: null,
loading: false
};
},
methods: {
onLoading() {
// @ts-ignore
this.loading = true;
console.log("Loading...");
},
onLoaded() {
// @ts-ignore
this.loading = false;
console.log("Loaded.");
},
onLoadingError(error: AxiosError, serviceUrl: string) {
// @ts-ignore
this.loading = false;
console.log("Loading error for", serviceUrl, error.response);
}
}
};
new Vue(appOptions).$mount("#app");
messageComponent-pure-vue.ts：
import * as Vue from "vue";
import * as VueRouter from "vue-router";
import { AxiosError } from "axios";
//region App components
import MessageComponent from "./messageComponent-pure-vue";
//endregion
Vue.use(VueRouter);
const routes = [
{
path: "/",
component: MessageComponent
}
];
const router = new VueRouter({
routes
});
const appOptions = {
router,
data() {
return {
user: null,
loading: false
};
},
methods: {
onLoading() {
// @ts-ignore
this.loading = true;
console.log("Loading...");
},
onLoaded() {
// @ts-ignore
this.loading = false;
console.log("Loaded.");
},
onLoadingError(error: AxiosError, serviceUrl: string) {
// @ts-ignore
this.loading = false;
console.log("Loading error for", serviceUrl, error.response);
}
}
};
new Vue(appOptions).$mount("#app");
此示例工作正常。现在，要升级到Vue.js 2.5.0 +最新的vue-router，以下是已记录的必需更改：
package.json：更新为"vue": "~2.5.0" + "vue-router": "~3.1.5"*.ts：import * as Vue from "vue"; => import Vue from "vue";app-pure-vue.ts：import * as VueRouter from "vue-router"; => import VueRouter from "vue-router";代码会编译，但会在Vue.extend()中的messageComponent-pure-vue.ts上爆炸：
Uncaught TypeError: Cannot read property 'extend' of undefined
at Object.<anonymous> (messageComponent-pure-vue.ts:5)
您能帮我解决这个问题吗？此处提供了最小的可重现示例：https://github.com/DKroot/Scratchpad/tree/master/Client_Side/Vue.js-2.5。有效的2.4代码位于https://github.com/DKroot/Scratchpad/tree/master/Client_Side/Vue.js-2.4。
我到目前为止所做的：
改为尝试：
import Vue from "vue";
import VueRouter from "vue-router";