Can you give an example of how to create "header" tag in index.html refer to this desc

Your publicPathExpression is set to <code class="notr

Just refer to the test. In your HTML file: <div class="Box Box--

works in this way: vite.config.js: <div class="snippet-clipboard

Example of how to create "header" tag in index.html about vite-plugin-public-path HOT 5 CLOSED

TrendAlan commented on July 17, 2024

Example of how to create "header" tag in index.html

from vite-plugin-public-path.

Comments (5)

Menci commented on July 17, 2024 2

Your publicPathExpression is set to /static/sig/ (without quotes), which is NOT a valid JS expression.

You shouldn't use /static/sig/ as publicPathExpression, instead use a JS expression like window.publicPath and assign to it on your <head>:

<script>
  window.publicPath = "http://cdn.your.site/static/sig/";
</script>

from vite-plugin-public-path.

Menci commented on July 17, 2024

Just refer to the test. In your HTML file:

vite-plugin-public-path/e2e/index.html

Lines 8 to 10 in 9ef47e7

    
           <script> 
        
             window.publicPath = __public_path__; 
        
           </script>

If you public path is decided staticly in client side, just use a string literal expression here. If your server decides which CDN to use, replace a placeholder when serving the file like:

vite-plugin-public-path/e2e/e2e.test.ts

Lines 102 to 105 in 9ef47e7

    
           // Replace the dynamic public path value in `index.html` 
        
           if (filePath === "index.html") { 
        
             return (fileContent as string).replace("__public_path__", JSON.stringify(servers[Server.Dynamic])); 
        
           }

from vite-plugin-public-path.

Menci commented on July 17, 2024

Also you can provide a minimum working example to reproduce your problem if you encountered one.

from vite-plugin-public-path.

TrendAlan commented on July 17, 2024

Can you help to take a look?
Thank you so much

vite.config.js

  base: process.env.NODE_ENV === "production" ? "/__vite_base__/" : "/",
  plugins:[
    react(),
    publicPath({
      // A JS expression evaluates on client side each time when loading a new file
      // Should evaluate to a string ending with "/"
      publicPathExpression: "/static/sig/",
      // See below for explanation of `options.html`
      html: true
    }),
  ],

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script> 
      window.publicPath = __public_path__; 
    </script>    
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

build error:

[vite-plugin-public-path] error: Unexpected token `<eof>`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier
 --> <anon>:1:12
  |
1 | /static/sig/
  |            ^



Caused by:
    Syntax Error
error during build:
Error: error: Unexpected token `<eof>`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier
 --> <anon>:1:12
  |
1 | /static/sig/

from vite-plugin-public-path.

TrendAlan commented on July 17, 2024

works in this way:

vite.config.js:

  base: process.env.NODE_ENV === "production" ? "/__vite_base__/" : "/",
  plugins:[
    react(),
    publicPath({
      // A JS expression evaluates on client side each time when loading a new file
      // Should evaluate to a string ending with "/"
      publicPathExpression: "window.publicPath",
      // See below for explanation of `options.html`
      html: true
    }),
  ],

indext.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script> 
      window.publicPath = "/static/sig/"; 
    </script>    
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Thank you so much

from vite-plugin-public-path.

Example of how to create "header" tag in index.html about vite-plugin-public-path HOT 5 CLOSED

Comments (5)

Related Issues (4)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	// Replace the dynamic public path value in `index.html`
	if (filePath === "index.html") {
	return (fileContent as string).replace("__public_path__", JSON.stringify(servers[Server.Dynamic]));
	}