我有一个使用 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:从“vue”导入 * as Vue;=>从“vue”导入 Vue;app-pure-vue.ts:从“vue-router”导入*作为VueRouter;=>从“vue-导入VueRouter”路由器”;
代码可以编译，但会在 messageComponent-pure-vue.ts 中的 Vue.extend() 上崩溃:
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 .
到目前为止我做了什么:
- 已将该问题隔离到 2.5.0 升级
- 仔细查看 2.5.0 发行说明 ( https://github.com/vuejs/vue/releases/tag/v2.5.0 ) 和相应的博客文章 ( https://medium.com/the-vue-point/upcoming-typescript-changes-in-vue-2-5-e9bd7e2ecf08 )
- 审查了 2.5.0 中 TypeScript 声明的更改。导出有点太复杂，我无法找出根本原因。
最佳答案
TL；博士:
试试这个:
import Vue from "vue";
import VueRouter from "vue-router";
说明:
当模块这样编写时:
// module.ts
export function x() { ... }
export function y() { ... }
你可以像这样导入它:
import * as Module from "./module";
但是当它写成这样时:
// module-with-default.ts
export default class Module {
public static function x() { ... }
public static function y() { ... }
}
您可以像这样导入它:
import Module from "./module-with-default";
在这两种情况下，您都可以像这样使用它:
Module.x();
Module.y();
Vue.js 中的更改:
这是how it is exported in v2.5.0 :
export default Vue
这是is how it is exported in v2.4.0 :
export = Vue;
关于typescript - Vue.js 2.5 升级后无法使 Vue.js + TypeScript + RequireJS 堆栈工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59958983/