./src/main.js in multi (webpack)-dev-server/client 但我没有 main.js。我想使用打字稿

Question

我正在使用 tailwind 和打字稿制作演示 Vue.js 3 应用程序。每当我运行应用程序时，我都会收到一条错误消息：

This relative module was not found:

* ./src/main.js in multi (webpack)-dev-server/client?https://192.168.2.102:8090&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

main.ts

import { createApp } from 'vue';
import App from './App.vue'
import router from './router'
import './styles/app.css';

createApp(App)
    .use(router)
    .mount('#app');

App.vue

<template>
    <div class="justify-center flex bg-yellow-300 items-center h-screen">
        <div class="text-4xl">
            {{ hello }} 
        </div>
    </div>
</template>

<script lang="ts">
import {Vue} from "vue-property-decorator";

export default class App extends Vue {

    hello = 'Hello world'

}
</script>

vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '^/api': {
                target: 'http://localhost:8081'
            }
        }
    }
}

package.json

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8090 --https true",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^4.0.12"
  },

还有其他人遇到过这个问题吗？

Answer 1

在幕后，@vue/cli 使用 webpack。 Webpacks 的配置可通过 vue.config.js 访问，从技术上讲，您可以手动更新应用程序的入口点。 Docs here.

但是，将打字稿添加到现有 @vue/cli 项目的推荐方法是通过运行

添加 dedicated plugin

vue add typescript

在项目的根目录中。

您无需手动将文件从 .js 更改为 .ts 即可执行此操作，脚本会为您完成。最重要的是，它将进行必要的 webpack 配置更改，其中之一是将入口点从 src/main.js 更改为 src/main.ts.

./src/main.js in multi (webpack)-dev-server/client 但我没有 main.js。我想使用打字稿

./src/main.js in multi (webpack)-dev-server/client but I do not have main.js. I want to use typescript

typescript

vue.js

vuejs3