2

yarn dev 返回此错误。

WARNING in ./Js/App.vue?vue&type=script&lang=ts& 1:166-169
"export 'default' (imported as 'mod') was not found in '-!../node_modules/ts-loader/index.js!../node_modules/vue-loader/lib
/index.js??vue-loader-options!./App.vue?vue&type=script&lang=ts&'
 @ ./Js/App.vue
 @ ./Js/dashboard.ts
 @ multi ./Js/dashboard.ts ./Sass/dashboard.scss

我正在使用带有打字稿的 vue。

这是我的 ts-config.json

{
"compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack"],
    "paths": {
        "@/*": ["Js/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": ["Js/**/*.ts", "Js/**/*.vue", "Js/tests/**/*.ts"],
"exclude": ["node_modules"]}

这是我的 main.ts

import Vue from "vue";
import App from "./App.vue";

new Vue({
    render: h => h(App)
}).$mount("#dashboard");

这是我的 app.vue

<template>
    <div id="app">
        <h1>hello world</h1>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
    name: "App"
})
export class App extends Vue {}
</script>

如果我在 app.vue 中没有 ts 代码运行没问题。使用 app.vue 终端中的 ts 代码显示此错误并且未运行我的应用程序。

4

1 回答 1

7

我解决了这个问题。我的项目在 laravel 中运行。

options: { appendTsSuffixTo: [/\.vue$/] }我在 webpack.mix.js 中错过了这一行

这是我的混合配置。

mix
  .js(__dirname + '/js/folder.ts', 'js/folder.js')
  .sass(__dirname + '/sass/folder.scss', 'css/folder.css')
  .webpackConfig({
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          options: { appendTsSuffixTo: [/\.vue$/] },
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
    },
  });
于 2020-03-09T11:56:37.473 回答