Replies: 3 comments 5 replies
-
|
Of course you can, but you need to use <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<%- injectScript %>
</body>
</html>// vite.config.ts
import { createHtmlPlugin } from 'vite-plugin-html'
const main = '/packages/module1/main.ts' // Dynamic according to the actual situation
export default defineConfig({
plugins: [
createHtmlPlugin({
inject: {
data: {
injectScript: `<script type="module" src="${main}"></script>`,
},
},
}),
]
}) |
Beta Was this translation helpful? Give feedback.
-
|
Unless we are doing something wrong, doesn't seem to work. We have: <!-- ./vue_index_template.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<div id="app"></div>
<%- injectScript %>
</body>
</html>// ./vue.config.base.js
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue2'
import { join, resolve } from 'path'
import { createHtmlPlugin } from 'vite-plugin-html'
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
return {
build: {
rollupOptions: {
input:
resolve(__dirname, 'vue_index_template.html'), // without this vite searches for an index.html in packages/project1/src/index.html and sends "Could not resolve entry module (index.html)."
},
},
plugins: [
vue(),
createHtmlPlugin({
inject: {
data: {
injectScript: '<script type="module" src="/src/main.js"></script>',
},
},
}),
],
resolve: {
alias: {
'@': 'src',
},
},
}
})// packages/project1/vite.config.js
// we have 17 vue projects all of them with the same config
module.exports = require('./../../vite.config.base.js')The result is still the same: yarn workspace project1 run build
vite v3.2.5 building for production... 23:08:23
✓ 304 modules transformed. 23:08:28
rendering chunks (35)...
ERROR [vite:build-html] The "fileName" or "name" properties of emitted files must be strings that are neither absolute nor relative paths, received "../../vue_index_template.html". |
Beta Was this translation helpful? Give feedback.
-
This configuration only works in production mode. |
Beta Was this translation helpful? Give feedback.
-
|
Here you go. https://stackblitz.com/edit/vitejs-vite-59rhc6?file=vite.config.base.js |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
I can offer 2 options: |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I'll try those two options. I'll report back. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, have you resolve this issues cause I try to achieve the same; Cause I put |
Beta Was this translation helpful? Give feedback.
-
Hello, we are trying to replicate a vue-cli webpack configuration for multiple projects in a monorepo.
Given
and
but unfortunately there seems to be a problem...
What are our options to have a single index.html? (that would not require us to copy the same index.html over and over)
Beta Was this translation helpful? Give feedback.
All reactions