时间戳

首页 > 解决方案 > vue cli build 为什么会两次注入app.js、app.css、vendors.js和vendors.css？

vue.js - vue cli build 为什么会两次注入app.js、app.css、vendors.js和vendors.css？

问题描述

我不明白为什么 vue cli 两次注入 js 和 css 文件。一次在头部内部，带有 rel="preload"，一次在体内，没有 rel 属性。

我试图找到需要添加到 vue.config.js 以解决此问题的选项，但找不到任何选项。

我的 package.json：

{
  "name": "somename",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.3",
    "axios": "^0.18.0",
    "axios-rest-client": "^0.1.11",
    "simplebar-vue": "^1.0.0-alpha.6",
    "vue": "^2.6.10",
    "vue-js-modal": "^1.3.28",
    "vue-meta": "^1.6.0",
    "vue-router": "^3.0.6",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.6.0",
    "@vue/cli-plugin-eslint": "^3.6.0",
    "@vue/cli-service": "^3.6.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.18.0",
    "sass-loader": "^7.1.0",
    "svg-to-vue-component": "^0.3.8",
    "vue-template-compiler": "^2.6.10"
  }
}

我的 vue.config.js：

module.exports = {
  assetsDir: "./static/",
  productionSourceMap: false,
  chainWebpack: config => {
    // Only convert .svg files that are imported by these files as Vue component
    const FILE_RE = /\.(vue|js|ts|svg)$/;

    // Use vue-cli's default rule for svg in non .vue .js .ts files
    config.module.rule("svg").issuer(file => !FILE_RE.test(file));

    // Use our loader to handle svg imported by other files
    config.module
      .rule("svg-component")
      .test(/\.svg$/)
      .issuer(file => FILE_RE.test(file))
      .use("vue")
      .loader("vue-loader")
      .end()
      .use("svg-to-vue-component")
      .loader("svg-to-vue-component/loader");
  },
};

npm run build 后渲染的 HTML：

<!DOCTYPE html>
<html lang=en>

<head>
    ...
    ...
    ...
    ...
    <link href=/static/css/app.0236e035.css rel=preload as=style>
    <link href=/static/css/chunk-vendors.a1440aaa.css rel=preload as=style>
    <link href=/static/js/app.e0f054b2.js rel=preload as=script>
    <link href=/static/js/chunk-vendors.85520ed9.js rel=preload as=script>
    <link href=/static/css/chunk-vendors.a1440aaa.css rel=stylesheet>
    <link href=/static/css/app.0236e035.css rel=stylesheet>
</head>

<body>
    <noscript><strong>We're sorry but somename doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
    <div id=app></div>
    <script src=/static/js/chunk-vendors.85520ed9.js></script>
    <script src=/static/js/app.e0f054b2.js></script>
</body>

</html>

我想知道如何将其修复为只注入一次，或者可能是因为预加载而变成这样？

标签： vue.jswebpack

解决方案

推荐阅读