Closed ItsTiffanyChen closed 1 year ago
首先感謝大大開發這個套件給大家使用🙏 有遇到一個困惑,困擾了好幾天,但不確定是否和此套件的設定有關聯,因此想請教一下 以下是我的 vite.config.js
vite.config.js
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' import { createMpaPlugin } from "vite-plugin-virtual-mpa"; import { splitVendorChunkPlugin } from "vite"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), createMpaPlugin({ pages: [ { name: "test-index", template: "./templates/test/index/index.html", entry: resolve(__dirname, "./src/pages/test/index/index.js"), filename: "test/index/index.html" }, { name: "test-main", template: "./templates/test/main/index.html", entry: resolve(__dirname, "./src/pages/test/main/index.js"), filename: "test/main/index.html" } ] }), splitVendorChunkPlugin() ], build: { rollupOptions: { output: { entryFileNames: "assets/js/[name].[hash].js", assetFileNames: "assets/css/[name].[hash][extname]", chunkFileNames: ({ name }) => { // console.log('chunkFileNames', name) const filename = name === "vendor" ? "vendor" : "shared" return `assets/js/${filename}.[hash].js` }, } } } })
目前 yarn build 後的結果如下:
yarn build
其中 dist/assets/css/index.4a300418.css 以及 dist/assets/css/index.5ade7a68.css 是兩個 page 分別的 css 但我希望的是 css 的檔名也是對齊 pages 的 name,和產出的 js 一致,也就是 dist/assets/css/test-index.4a300418.css 和 dist/assets/css/test-main.5ade7a68.css 不確定是否有辦法使用此 plugin 設定完成?謝謝! example repo: https://github.com/ItsTiffanyChen/vite-test
dist/assets/css/index.4a300418.css
dist/assets/css/index.5ade7a68.css
dist/assets/css/test-index.4a300418.css
dist/assets/css/test-main.5ade7a68.css
插件内部生成最终 html 文件路径的逻辑涉及虚拟文件,具体可以看 README 里的介绍,用户的感知也就是可以通过 filename 选项来映射最后生成的 html 文件路径。 除此之外没有别的逻辑了,你这里配置的这些 rollupOptions 就是 rollup 自身的行为以及可能还有一些 vite 封装后的默认行为。
好的了解 感恩!
首先感謝大大開發這個套件給大家使用🙏 有遇到一個困惑,困擾了好幾天,但不確定是否和此套件的設定有關聯,因此想請教一下 以下是我的
vite.config.js
目前
yarn build
後的結果如下:其中
dist/assets/css/index.4a300418.css
以及dist/assets/css/index.5ade7a68.css
是兩個 page 分別的 css 但我希望的是 css 的檔名也是對齊 pages 的 name,和產出的 js 一致,也就是dist/assets/css/test-index.4a300418.css
和dist/assets/css/test-main.5ade7a68.css
不確定是否有辦法使用此 plugin 設定完成?謝謝! example repo: https://github.com/ItsTiffanyChen/vite-test