index.html 在build的时候需要忽略里面的一些处理 #7160

menkeydyvh · 2022-03-03T09:35:03Z

Describe the bug

index.html 里面使用了服务端参数 {{cdnHost}} 在使用服务端参数的时候会在build的时候被处理报错，希望能不对这个link处理，或者能配置忽略，当然我开发和build是分开两个index.html的

index.html

<!DOCTYPE html>
<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.0">
  <link rel="icon" href="{{cdnHost}}/cdn/images/favicon.ico">
  <link rel="stylesheet" href="{{cdnHost}}/cdn/printjs/print.min.css" type="text/css">
  <title></title>
</head>

<body>

  <div id="app"></div>

  <script src="{{cdnHost}}/cdn/fingerprint2/2.1.0/fingerprint2.js"></script>
  <script src="{{cdnHost}}/cdn/socket.io/2.2.0/socket.io.js"></script>
  <script src="{{cdnHost}}/cdn/printjs/print.min.js"></script>
  <script type="module" src="../src/main.js"></script>

</body>

</html>

error

[vite]: Rollup failed to resolve import "{{cdnHost}}/cdn/printjs/print.min.css" from "build\index.html".   
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "{{cdnHost}}/cdn/printjs/print.min.css" from "build\index.html".

异常提示的 ‘build.rollupOptions.external’ 会在build的时候被忽略掉这一行也不是我想要的结果

Reproduction

这个不需要提供把看下错误就知道了

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 6.68 GB / 15.89 GB
  Binaries:
    Node: 16.10.0 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.24.0 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 98.0.4758.102
    Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.62)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @vitejs/plugin-vue: 1.9.3 => 1.9.3
    vite: 2.8.6 => 2.8.6

Used Package Manager

npm

Logs

> v3web@0.0.0 build
> vite build --debug

  vite:config bundled config file loaded in 144.46ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   css: {
  vite:config     postcss: { autoprefixer: {} },
  vite:config     preprocessorOptions: { less: [Object] }
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     proxy: {
  vite:config       '/gql': [Object],
  vite:config       '/api': [Object],
  vite:config       '/is-start-socket': [Object],
  vite:config       '/upload-file': [Object],
  vite:config       '/qeelyn-framework': [Object],
  vite:config       '/report/preview': [Object],
  vite:config       '/temporary-api': [Object],
  vite:config       '/get-page-form': [Object]
  vite:config     },
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'public/build/v3web',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: false,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { external: [], input: [Object] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: 'D:/codeing/git/deltaone/web-admin/v3web/vite.config.js',
  vite:config   configFileDependencies: [ 'vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: 'D:/codeing/git/deltaone/web-admin/v3web',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: 'D:\\codeing\\git\\deltaone\\web-admin\\v3web\\public',
  vite:config   cacheDir: 'D:\\codeing\\git\\deltaone\\web-admin\\v3web\\node_modules\\.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: {
  vite:config       '/gql': [Object],
  vite:config       '/api': [Object],
  vite:config       '/is-start-socket': [Object],
  vite:config       '/upload-file': [Object],
  vite:config       '/qeelyn-framework': [Object],
  vite:config       '/report/preview': [Object],
  vite:config       '/temporary-api': [Object],
  vite:config       '/get-page-form': [Object]
  vite:config     },
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: {
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   }
  vite:config } +8ms
vite v2.8.6 building for production...
<script src="{{cdnHost}}/cdn/fingerprint2/2.1.0/fingerprint2.js"> in "/build/index.html" can't be bundled without type="module" attribute
<script src="{{cdnHost}}/cdn/socket.io/2.2.0/socket.io.js"> in "/build/index.html" can't be bundled without type="module" attribute
<script src="{{cdnHost}}/cdn/printjs/print.min.js"> in "/build/index.html" can't be bundled without type="module" attribute
✓ 1 modules transformed.
[vite]: Rollup failed to resolve import "{{cdnHost}}/cdn/printjs/print.min.css" from "build\index.html".   
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "{{cdnHost}}/cdn/printjs/print.min.css" from "build\index.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (D:\codeing\git\deltaone\web-admin\v3web\node_modules\vite\dist\node\chunks\dep-9c153816.js:39242:19)
    at onwarn (D:\codeing\git\deltaone\web-admin\v3web\node_modules\vite\dist\node\chunks\dep-9c153816.js:39020:13)
    at Object.onwarn (D:\codeing\git\deltaone\web-admin\v3web\node_modules\rollup\dist\shared\rollup.js:23118:13)
    at ModuleLoader.handleResolveId (D:\codeing\git\deltaone\web-admin\v3web\node_modules\rollup\dist\shared\rollup.js:22392:26)
    at D:\codeing\git\deltaone\web-admin\v3web\node_modules\rollup\dist\shared\rollup.js:22353:26
[!] Error: unfinished hook action(s) on exit:
(vite:load-fallback) load "D:/codeing/git/deltaone/web-admin/v3web/src/main.js"

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

Menci · 2022-03-03T16:47:05Z

Maybe you can try using my plugin https://www.npmjs.com/package/vite-plugin-public-path

poyoho · 2022-03-04T04:52:23Z

During the build process, vite will collect resource urls to generate [name].[hash].[ext] files

menkeydyvh · 2022-03-04T05:35:22Z

也许您可以尝试使用我的插件https://www.npmjs.com/package/vite-plugin-public-path

你的实现是在 generateBundle 实现的这个错误在 resolveId 之后就出现异常了

Menci · 2022-03-04T09:36:53Z

@menkeydyvh 用我的插件的话，你需要去掉 {{cdnHost}}，把这些资源都按照 Vite 的本地引用格式来写，然后在 <head> 里写一段脚本，在客户端动态给 window.publicPath 赋值，window.publicPath 的值应该等于你 {{cdnHost}} 的值（记得加上 / 结尾）。

不过有个问题是，我的插件是对全站所有资源生效的，如果只希望一部分走 CDN 的话就不适用了。

menkeydyvh · 2022-03-04T09:40:20Z

@menkeydyvh 用我的插件的话，你需要去掉 {{cdnHost}}，把这些资源都按照 Vite 的本地引用格式来写，然后在 <head> 里写一段脚本，在客户端动态给 window.publicPath 赋值，window.publicPath 的值应该等于你 {{cdnHost}} 的值（记得加上 / 结尾）。

不过有个问题是，我的插件是对全站所有资源生效的，如果只希望一部分走 CDN 的话就不适用了。

如果实在没办法处理就自己写插件了。话说你会中文干啥刚开始还写英文给我我还要翻译一下都看不懂

dabuside · 2022-03-11T03:33:49Z

try

rollupOptions: {
   external: /{{cdnHost}}/
}

poyoho · 2022-04-26T05:17:25Z

now workaround
https://stackblitz.com/edit/vitejs-vite-amwzvk?file=vite.config.ts

menkeydyvh added the pending triage label Mar 3, 2022

VdustR mentioned this issue Apr 4, 2022

example-spa-container VdustR/example-spa-container#1

Open

poyoho added the p2-edge-case Bug, but has workaround or limited in scope (priority) label Apr 26, 2022

poyoho mentioned this issue Apr 26, 2022

fix: warn for unresolved css in html #7911

Merged

9 tasks

patak-dev closed this as completed in #7911 May 4, 2022

poyoho mentioned this issue May 10, 2022

Vite removes external module from index.html #3533

Open

6 tasks

github-actions bot locked and limited conversation to collaborators May 19, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

index.html 在build的时候需要忽略里面的一些处理 #7160

index.html 在build的时候需要忽略里面的一些处理 #7160

menkeydyvh commented Mar 3, 2022

Menci commented Mar 3, 2022

poyoho commented Mar 4, 2022

menkeydyvh commented Mar 4, 2022

Menci commented Mar 4, 2022

menkeydyvh commented Mar 4, 2022

dabuside commented Mar 11, 2022

poyoho commented Apr 26, 2022

index.html 在build的时候需要忽略里面的一些处理 #7160

index.html 在build的时候需要忽略里面的一些处理 #7160

Comments

menkeydyvh commented Mar 3, 2022

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

Menci commented Mar 3, 2022

poyoho commented Mar 4, 2022

menkeydyvh commented Mar 4, 2022

Menci commented Mar 4, 2022

menkeydyvh commented Mar 4, 2022

dabuside commented Mar 11, 2022

poyoho commented Apr 26, 2022