Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use different index.html page for dev versus prod build #678

Closed
jonjanisch opened this issue Aug 5, 2020 · 2 comments
Closed

Use different index.html page for dev versus prod build #678

jonjanisch opened this issue Aug 5, 2020 · 2 comments

Comments

@jonjanisch
Copy link

I'm trying to figure out the best way to integrate Vue with a legacy JS framework that has its own build process and its own index.html file (which has odd templating for including dev resources vs prod resources).

I previously got this working using vue-cli. I was able to conditionally include JavaScript and CSS in my index.html file using the NODE_ENV environment variable and those resources were loaded using the devServer proxy (since they are not located in the Vue project dir):

<head>
    <title>Vue app</title>
    <%= NODE_ENV === 'development' ? '<link rel="stylesheet" href="bootstrap.css">' : '<link rel="stylesheet" href="prod.css">'  %>
    <%= NODE_ENV === 'development' ? '<script src="legacy-dev.js"></script>' : ''  %>

This worked great for both the dev mode and production build. After building, the generated index.html which has the injected vue script tags is then copied over into our legacy JS framework's prod build

With vite, I thought I could accomplish the same thing but I don't know how to use environment variables in the index.html page. Also, even if I just hard-code <link rel="stylesheet" href="prod.css"> without the NODE_ENV condition, vite tries to process this file which is not located in the Vue project dir and it errors out***. I don't want vite to try and process the legacy framework's files.

It may be easier if I can simply use a different index.html file for dev vs prod build. Is that possible?

*** There's a slight bug in the error message when a file is not found. It strips the first character of the filename, e.g. rod.css instead of prod.css:

vite v1.0.0-rc.4
⠋ Building for production...
[vite] Build errored out.
[Error: ENOENT: no such file or directory, open '/projects/abc/web-app/vue/rod.css'] {
     errno: -2,
     code: 'ENOENT',
     syscall: 'open',
     path: '/projects/abc/web-app/vue/rod.css'
}
@jonjanisch
Copy link
Author

I solved this by just modifying package.json

"scripts": {
  "dev": "copyfiles -f ./buildfiles/dev/index.html ./; vite",
  "build": "copyfiles -f ./buildfiles/prod/index.html ./; vite build"
},

@Esardes Esardes mentioned this issue Apr 19, 2021
Closed
@trapcodeio
Copy link

trapcodeio commented Jul 16, 2021 •
edited
Loading

@jonjanisch i came across this issue and created a simple package for it.

Npm: vite-plugin-ejs

Use Ejs in index.html

@github-actions github-actions bot locked and limited conversation to collaborators Jul 31, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jonjanisch @trapcodeio