vuejs组件加载失败

Question

使用vue ui和inspect任务验证webpack.config.js，完成后没有报错，但应用程序在引导时出错。加载失败似乎是位置以外的原因，文件在预期的位置。

控制台输出

  [vue-router] Failed to resolve async component default: Error: Loading chunk home failed.
  (error: http://localhost:63660/wwwroot/dist/home.js) vue-router.esm.js:17:39

  [vue-router] uncaught error during route navigation: vue-router.esm.js:17:39
  Error: "Loading chunk home failed.
  (error: http://localhost:63660/wwwroot/dist/home.js)"
  onScriptComplete http://localhost:63660/dist/main.js?v=u5nsel5s4jcTtEeZq4fdOeArMA_6XFxknkNJ6EByLqI:817:29
 vue-router.esm.js:1898:9

 Loading failed for the <script> with source 
 “http://localhost:63660/wwwroot/dist/home.js”. localhost:63660:1:1

web.config.js

  const bundleOutputDir = "./wwwroot/dist/";

output 配置定义

   output: {
        filename: "[name].js",
        path: path.join(__dirname, bundleOutputDir),
        publicPath: path.join(__dirname, bundleOutputDir),
    },

main.ts

定义的路线

   const routes = [
   {
    path: '/', name: 'home',
    component: () => import(/* webpackChunkName: "home" */ './views/Home.vue'),
   },
   {
    path: '/fetchdata', name: 'fetchdata',
    component: () => import(/* webpackChunkName: "fetchdata" */ './components/fetchdata/fetchdata.vue')},
   {
      path: '/about', name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
   },
  ];

 new Vue({
  router: new VueRouter({ mode: 'history', routes }),
  store,
  render: (h) => h(App),
 }).$mount('#app-root');

App.vue

  <template>
  <div id='app-root' class="container-fluid">
    <div class="row">
        <div class="col-sm-3">
            <menu-component />
        </div>
        <div class="col-sm-9">
            <router-view></router-view>
        </div>
    </div>
   </div>
 </template>

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

  @Component({
    components: {
     MenuComponent: require('./components/navmenu/navmenu.vue'),
    },
  })

    export default class AppComponent extends Vue {
    }
  </script>

index.cshtml（应用入口）

  @{
     ViewData["Title"] = "Home Page";
  }

  <div id='app-root'>Loading...</div>

  @section scripts {
     <script src="~/dist/main.js" asp-append-version="true"></script>
  }

package.json

  ...
  "devDependencies": {
  "@types/node": "^10.12.18",
  "@types/webpack-env": "^1.13.6",
  "@vue/cli-plugin-typescript": "^3.2.0",
  "@vue/cli-service": "^3.2.0",
  "aspnet-webpack": "^3.0.0",
  "awesome-typescript-loader": "^5.2.1",
  "bootstrap": "^3.4.0",
  "css-loader": "^2.0.1",
  "eslint": "^5.11.0",
  "eslint-loader": "^2.1.1",
  "eslint-plugin-vue": "^5.0.0",
  "event-source-polyfill": "^1.0.5",
  "extract-text-webpack-plugin": "^4.0.0-beta.0",
  "file-loader": "^2.0.0",
  "isomorphic-fetch": "^2.2.1",
  "jquery": "^3.1.1",
  "style-loader": "^0.23.1",
  "ts-loader": "^5.3.1",
  "typescript": "^3.0.0",
  "uglifyjs-webpack-plugin": "^2.0.1",
  "url-loader": "^1.1.2",
  "vue-loader": "^15.4.2",
  "vue-template-compiler": "^2.5.17",
  "webpack": "^4.28.1",
  "webpack-cli": "^3.1.2",
  "webpack-dev-middleware": "^3.4.0",
  "webpack-hot-middleware": "^2.24.3"
},
"dependencies": {
  "vue": "^2.5.17",
  "vue-class-component": "^6.0.0",
  "vue-property-decorator": "^7.0.0",
  "vue-router": "^3.0.1",
  "vuex": "^3.0.1",
  "popper.js": "^1.14.6"
}

Answer 1

这是一个愚蠢的错误...像往常一样，错误输出的答案一目了然，但我被太多新事物分散了注意力而无法看到它。 publicPath 设置为根静态目录 (wwwroot/dist)，因此 url 服务包括 wwwroot。解决方法是仅指定 dist/ 而不是 wwwroot/dist //publicPath: path.join(__dirname, bundleOutputDir),

   output: {
        filename: "[name].js",
        path: path.join(__dirname, bundleOutputDir),
        publicPath: "dist/",
        libraryExport: "default",
    },

vuejs组件加载失败

vuejs component load failures

vue.js

vue-router

asp.net-core-2.1