Question

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代码显示此错误，但未运行我的应用。

Answer 1

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

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

这是我的混音配置。

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'],
    },
  });

找不到Vue导出“默认”（导入为“ mod”）

1 个答案: