Question

我不明白为什么vue cli两次注入js和css文件。一次在内部使用rel =“ preload”，一次在内部使用rel属性。

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

我的package.json：

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");
  },
};

我的vue.config.js：

<!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>

npm运行构建后呈现的HTML：

initLimit

我想知道如何修复它只能被注入一次，或者可能是由于预加载而引起的？

为什么vue cli两次构建两次注入app.js，app.css，vendors.js和vendor.css的注入？

0 个答案: