vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.76k stars 6.33k forks source link

multi-page配置删除preload插件无法注入vendors文件 #5219

Open gezhigang1005 opened 4 years ago

gezhigang1005 commented 4 years ago

Version

4.2.0

Reproduction link

https://github.com/i58/multipage

Environment info

System:
    OS: macOS Mojave 10.14.2
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
  Binaries:
    Node: 12.2.0 - ~/.nvm/versions/node/v12.2.0/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.2.0/bin/npm
  Browsers:
    Chrome: 80.0.3987.122
    Firefox: 68.0.1
    Safari: 12.0.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.2.2 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.2.2 
    @vue/cli-plugin-babel: ~4.2.0 => 4.2.2 
    @vue/cli-plugin-eslint: ~4.2.0 => 4.2.2 
    @vue/cli-plugin-router:  4.2.2 
    @vue/cli-plugin-typescript: ~4.2.0 => 4.2.2 
    @vue/cli-plugin-unit-jest: ~4.2.0 => 4.2.2 
    @vue/cli-plugin-vuex: ~4.2.0 => 4.2.2 
    @vue/cli-service: ~4.2.0 => 4.2.2 
    @vue/cli-shared-utils:  4.2.2 
    @vue/component-compiler-utils:  3.1.1 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/eslint-config-typescript: ^5.0.1 => 5.0.1 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/test-utils: 1.0.0-beta.31 => 1.0.0-beta.31 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.1.2 => 6.2.1 
    jest-serializer-vue:  2.0.2 
    typescript: ~3.7.5 => 3.7.5 
    vue: ^2.6.11 => 2.6.11 
    vue-class-component: ^7.2.2 => 7.2.3 
    vue-eslint-parser:  7.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-jest:  3.0.5 
    vue-loader:  15.9.0 
    vue-property-decorator: ^8.3.0 => 8.4.0 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.1.2 => 3.1.2 
  npmGlobalPackages:
    @vue/cli: 4.2.2

Steps to reproduce

  1. 运行yarn build
  2. 注释掉vue.config.js中33、34行。 执行yarn build

What is expected?

html页面可以正常引入vendors~xxx.js公共引用文件

What is actually happening?

注释掉preload插件

<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
<title>TEST</title>
<link href="/static/css/index.4d7ae7bf.css" rel="stylesheet" />
</head>
<body>
<noscript>
<strong>We're sorry but TEST doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="/static/js/index.eaef257c.js"></script>
</body>
</html>

vendors~help~index~order.hash.js代码没有引用,不能正常执行代码


没有注释掉preload插件

<html lang="en">
 <head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="icon" href="/favicon.ico" />
  <title>TEST</title>
  <link href="/static/cssa/index.4d7ae7bf.css" rel="preload" as="style" />
  <link href="/static/js/index.4621eda1.js" rel="preload" as="script" />
  <link href="/static/js/vendors~help~index~order.60424b90.js" rel="preload" as="script" />
  <link href="/static/css/index.4d7ae7bf.css" rel="stylesheet" />
 </head>
 <body>
  <noscript>
   <strong>We're sorry but TEST doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <script src="/static/js/index.4621eda1.js"></script>
 </body>
</html>

所有编译build的文件都已经正常引用,但preload 模式下加载顺序有问题,不能正常执行代码

haoqunjiang commented 4 years ago

抱歉,你提供的复现项目里并没有包含 vue.config.js 文件……

gezhigang1005 commented 4 years ago

不好意思,已经添加了