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

Question

我正在使用 tailwind 和 typescript 制作一个演示 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

主要.ts

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

createApp(App)
    .use(router)
    .mount('#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'
            }
        }
    }
}

包.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，从技术上讲，您可以手动更新应用程序的入口点。文档在这里。

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

vue add typescript

在你的项目的根目录中。

您应该在不手动将文件从 更改.js为 的情况下执行此操作.ts，脚本将为您完成此操作。最重要的是，它将进行必要的 webpack 配置更改，其中之一是将入口点从 更改src/main.js为src/main.ts.