сбои загрузки компонента vuejs - PullRequest
Новая
       11

сбои загрузки компонента vuejs

0 голосов
/ 26 декабря 2018

Используя 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"
}

1 Ответ

0 голосов
/ 30 декабря 2018

Это была глупая ошибка ... на выходе ошибки, как обычно, был ясный ответ, но меня отвлекло слишком много новых вещей, чтобы увидеть его.В качестве 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",
    },
...