search

easy-team / egg-vue-typescript-boilerplate

Egg Vue TypeScript Server Side Render (SSR) / Client Side Render (CSR)
https://easyjs.cn/egg-vue
MIT License
72 stars 18 forks source link

layout/admin/index.vue插入cdn后，webpack打包会卡住 #10

Closed hsuanyi-chou closed 4 years ago

hsuanyi-chou commented 5 years ago

在layout里面的index.vue中(app/web/component/layout/admin/index.vue) 用来显示首页的地方 在<head>内试着插入cdn连结，假设polyfill.js 插入<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>后 执行npm run dev，webpack打包过程就会停住完全不动

个人猜测是把js的内容一起打包进去所以导致特别久，但不确定对不对

2019-04-17 09:13:57,774 INFO 2428 [master] node version v11.14.0
2019-04-17 09:13:57,776 INFO 2428 [master] egg version 2.21.1
2019-04-17 09:14:03,577 INFO 2428 [master] agent_worker#1:9892 started (5544ms)
2019-04-17 09:14:07,843 INFO 2428 [master] egg started on http://127.0.0.1:7001 (10067ms)
webpack build [==========                                                                                          ] 10% (0.0 seconds)
 [webpack-tool] start webpack node building server: http://127.0.0.1:9001
webpack build [==========                                                                                          ] 10% (0.0 seconds)
 [webpack-tool] start webpack web building server: http://127.0.0.1:9000
webpack build [=============                                                                                       ] 13% (2.9 seconds)

自己试过的方向：

  1. 放置不理会，看看最终有无打包好，放了近1小时仍没反应
  2. 插入别的js(如jquery, bootstrap)，照卡，只是停的%数不同。也就是只要有插入一个js的cdn就会卡住
  3. 换作业系统，在MacOS、Windows 下都一样
  4. 翻过不少webpack的文件，找不到解决方向
  5. 执行npm cache clean --force，一样无效
  6. 重新安装所有套件，无用

PS: 有使用npm-check-updates把所有套件都更新到最新，且使用目前最新版本的Node.Js

先谢谢协助了

hubcarl commented 5 years ago

@hsuanyi-chou 先确认两点：

hsuanyi-chou commented 5 years ago

@hsuanyi-chou 先确认两点：

  • 不插入，有无问题？ 或者说 直接 下载的骨架是否有问题？
  • 如果有问题，用 yarn 试试看，看看是否可以正常运行？
  1. 不插入时是可以正常打包的
  2. 用yarm 一样卡住

重新下载骨架，无修改任何东西来测试

先执行 npm i安装套件后，再执行npm run dev，可正常运作

接着在index.vue加入<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>，再执行npm run dev compile失败，有提示这段错误讯息Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

怪了，我自己修改的版本却没有这种提示，却是卡在build过不去

请问若要在head加其余的js，该放在何处呢？ 主要是想加bootstrap的js

完整错误讯息如下

> egg-vue-typescript-boilerplate@4.0.0 dev C:\Users\009652\Desktop\TEST
> egg-bin dev -r egg-ts-helper/register

[egg-ts-helper] create typings\app\extend\application.d.ts (7ms)
[egg-ts-helper] create typings\app\extend\context.d.ts (13ms)
[egg-ts-helper] create typings\app\controller\index.d.ts (5ms)
[egg-ts-helper] create typings\app\middleware\index.d.ts (4ms)
[egg-ts-helper] create typings\app\model\index.d.ts (6ms)
[egg-ts-helper] create typings\config\index.d.ts (14ms)
[egg-ts-helper] create typings\config\plugin.d.ts (7ms)
[egg-ts-helper] create typings\app\service\index.d.ts (5ms)
[egg-ts-helper] create typings\app\index.d.ts (3ms)
2019-04-18 16:03:59,752 INFO 20376 [master] node version v11.14.0
2019-04-18 16:03:59,753 INFO 20376 [master] egg version 2.21.1
2019-04-18 16:04:05,416 INFO 20376 [master] agent_worker#1:6428 started (5375ms)
2019-04-18 16:04:10,065 INFO 20376 [master] egg started on http://127.0.0.1:7001 (10311ms)
webpack build [==========                                                                                          ] 10% (0.0 seconds)
 [webpack-tool] start webpack node building server: http://127.0.0.1:9002
webpack build [==========                                                                                          ] 10% (0.0 seconds)
 [webpack-tool] start webpack web building server: http://127.0.0.1:9001
webpack build [====================================================================================================] 100% (7.2 seconds)

Build completed in 7.202s

× ｢wdm｣: Hash: ca40658fed34852e1f30
Version: webpack 4.28.4
Time: 7210ms
Built at: 2019-04-18 16:04:21
                         Asset      Size      Chunks             Chunk Names
                          0.js  29.7 KiB           0  [emitted]
                          1.js  54.5 KiB           1  [emitted]
                          2.js  24.2 KiB           2  [emitted]
                          3.js  23.5 KiB           3  [emitted]
                          4.js   7.9 KiB           4  [emitted]
                 admin/home.js   396 KiB  admin/home  [emitted]  admin/home
        font/element-icons.ttf  10.8 KiB              [emitted]
       font/element-icons.woff  6.02 KiB              [emitted]
  font/fontawesome-webfont.eot   162 KiB              [emitted]
  font/fontawesome-webfont.ttf   162 KiB              [emitted]
 font/fontawesome-webfont.woff  95.7 KiB              [emitted]
font/fontawesome-webfont.woff2  75.4 KiB              [emitted]
   img/fontawesome-webfont.svg   434 KiB              [emitted]

ERROR in ./app/web/component/layout/admin/index.vue?vue&type=template&id=0e494c96& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/web/component/layout/admin/index.vue?vue&type=template&id=0e494c96&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

  9  |      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  10 |      <link rel="stylesheet" href="/public/asset/css/bootstrap.min.css">
  11 |      <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
     |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  12 |    </head>
     |  ^^^^^^^^^
  13 |    <body class="admin">
     |  ^^^^^^^^^^^^^^^^^^^^^^
  14 |      <div id="app">
     |  ^^^^^^^^^^^^^^^^^^
  15 |        <MainLayout>
     |  ^^^^^^^^^^^^^^^^^^
  16 |          <div slot="main">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^
  17 |            <slot></slot>
     |  ^^^^^^^^^^^^^^^^^^^^^^^
  18 |          </div>
     |  ^^^^^^^^^^^^^^
  19 |        </MainLayout>
     |  ^^^^^^^^^^^^^^^^^^^
  20 |      </div>
     |  ^^^^^^^^^^
  21 |    </body>
     |  ^^^^^^^^^
  22 |  </html>
     |  ^^^^^^^
  23 |  <div v-else-if="!isNode" id="app">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  24 |    <MainLayout>
     |  ^^^^^^^^^^^^^^
  25 |      <div slot="main">
     |  ^^^^^^^^^^^^^^^^^^^^^
  26 |        <slot></slot>
     |  ^^^^^^^^^^^^^^^^^^^
  27 |      </div>
     |  ^^^^^^^^^^
  28 |    </MainLayout>
     |  ^^^^^^^^^^^^^^^
  29 |  </div>
     |  ^^^^^^

 @ ./app/web/component/layout/admin/index.vue?vue&type=template&id=0e494c96& 1:0-221 1:0-221
 @ ./app/web/component/layout/admin/index.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/thread-loader/dist/cjs.js??ref--0-1!./node_modules/ts-loader??ref--0-2!./app/web/page/admin/home/view/home/index.ts?vue&type=script&lang=ts&
 @ ./app/web/page/admin/home/view/home/index.ts?vue&type=script&lang=ts&
 @ ./app/web/page/admin/home/view/home/index.vue
 @ ./app/web/page/admin/home/index.ts
i ｢wdm｣: Failed to compile.
webpack build [====================================================================================================] 100% (8.7 seconds)

Build completed in 8.729s

× ｢wdm｣: Hash: 8e4dce039e17c4ad84d5
Version: webpack 4.28.4
Time: 8738ms
Built at: 2019-04-18 16:04:23
                                         Asset      Size      Chunks             Chunk Names
                   asset/css/bootstrap.min.css   120 KiB              [emitted]
                   asset/fonts/FontAwesome.otf   132 KiB              [emitted]
           asset/fonts/fontawesome-webfont.eot   162 KiB              [emitted]
           asset/fonts/fontawesome-webfont.svg   434 KiB              [emitted]
           asset/fonts/fontawesome-webfont.ttf   162 KiB              [emitted]
          asset/fonts/fontawesome-webfont.woff  95.7 KiB              [emitted]
         asset/fonts/fontawesome-webfont.woff2  75.4 KiB              [emitted]
  asset/fonts/glyphicons-halflings-regular.eot  19.7 KiB              [emitted]
  asset/fonts/glyphicons-halflings-regular.svg   106 KiB              [emitted]
  asset/fonts/glyphicons-halflings-regular.ttf  44.3 KiB              [emitted]
 asset/fonts/glyphicons-halflings-regular.woff  22.9 KiB              [emitted]
asset/fonts/glyphicons-halflings-regular.woff2  17.6 KiB              [emitted]
                      asset/images/favicon.ico  4.19 KiB              [emitted]
                      asset/images/loading.gif  6.58 KiB              [emitted]
                         asset/images/logo.png  35.2 KiB              [emitted]
                        font/element-icons.ttf  10.8 KiB              [emitted]
                       font/element-icons.woff  6.02 KiB              [emitted]
                  font/fontawesome-webfont.eot   162 KiB              [emitted]
                  font/fontawesome-webfont.ttf   162 KiB              [emitted]
                 font/fontawesome-webfont.woff  95.7 KiB              [emitted]
                font/fontawesome-webfont.woff2  75.4 KiB              [emitted]
                   img/fontawesome-webfont.svg   434 KiB              [emitted]
                                 js/chunk/0.js  92.2 KiB           0  [emitted]
                                 js/chunk/1.js   768 KiB           1  [emitted]
                                 js/chunk/2.js  87.1 KiB           2  [emitted]
                                 js/chunk/3.js  9.09 KiB           3  [emitted]
                                 js/chunk/4.js   165 KiB           4  [emitted]
                        js/chunk/admin/home.js  2.88 MiB  admin/home  [emitted]  admin/home
                                 js/runtime.js  33.6 KiB     runtime  [emitted]  runtime

ERROR in ./app/web/component/layout/admin/index.vue?vue&type=template&id=0e494c96& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/web/component/layout/admin/index.vue?vue&type=template&id=0e494c96&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

  9  |      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  10 |      <link rel="stylesheet" href="/public/asset/css/bootstrap.min.css">
  11 |      <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
     |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  12 |    </head>
     |  ^^^^^^^^^
  13 |    <body class="admin">
     |  ^^^^^^^^^^^^^^^^^^^^^^
  14 |      <div id="app">
     |  ^^^^^^^^^^^^^^^^^^
  15 |        <MainLayout>
     |  ^^^^^^^^^^^^^^^^^^
  16 |          <div slot="main">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^
  17 |            <slot></slot>
     |  ^^^^^^^^^^^^^^^^^^^^^^^
  18 |          </div>
     |  ^^^^^^^^^^^^^^
  19 |        </MainLayout>
     |  ^^^^^^^^^^^^^^^^^^^
  20 |      </div>
     |  ^^^^^^^^^^
  21 |    </body>
     |  ^^^^^^^^^
  22 |  </html>
     |  ^^^^^^^
  23 |  <div v-else-if="!isNode" id="app">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  24 |    <MainLayout>
     |  ^^^^^^^^^^^^^^
  25 |      <div slot="main">
     |  ^^^^^^^^^^^^^^^^^^^^^
  26 |        <slot></slot>
     |  ^^^^^^^^^^^^^^^^^^^
  27 |      </div>
     |  ^^^^^^^^^^
  28 |    </MainLayout>
     |  ^^^^^^^^^^^^^^^
  29 |  </div>
     |  ^^^^^^

 @ ./app/web/component/layout/admin/index.vue?vue&type=template&id=0e494c96& 1:0-221 1:0-221
 @ ./app/web/component/layout/admin/index.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/thread-loader/dist/cjs.js??ref--0-1!./node_modules/ts-loader??ref--0-2!./app/web/page/admin/home/view/home/index.ts?vue&type=script&lang=ts&
 @ ./app/web/page/admin/home/view/home/index.ts?vue&type=script&lang=ts&
 @ ./app/web/page/admin/home/view/home/index.vue
 @ ./app/web/page/admin/home/index.ts
 @ multi (webpack)-hot-middleware/client?path=http://127.0.0.1:9001/__webpack_hmr&noInfo=false&reload=false&quiet=false ./app/web/page/admin/home/index.ts
i ｢wdm｣: Failed to compile.
>>EASY_ENV_IS_NODE create true
2019-04-18 16:04:24,059 DEBUG 15172 Resource#this.config.injectRes []
2019-04-18 16:04:24,061 INFO 15172 [-/127.0.0.1/-/541ms GET /] [access] 127.0.0.1: - GET / HTTP/200 22 - 537 - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36
hubcarl commented 5 years ago

@hsuanyi-chou 不好意思，没有及时看到这个 不能直接script，可以看看 https://www.yuque.com/easy-team/easywebpack/wb66pe

hubcarl commented 5 years ago

@hsuanyi-chou vue 不能直接 script 插入，解决方案 https://www.yuque.com/easy-team/easywebpack/wb66pe

hsuanyi-chou commented 5 years ago

好的！非常感谢您的帮忙！