This repository contains a minimal reproduction of the issue using both Vue 2 and Vue 3.
The vite-plugin-vue2 plugin for Vite ignores Vite base URL option, while @vitejs/plugin-vue does.
You use Vite base setting to indicate a base URL (e.g. your app is deployed under /my-spa/) and expect the plugin to prepend the base path to any public path encountered in a Vue <template>.
For example, with the following directory structure:
├── dist (build)
├── public (default Vite `publicDir`, copied as is in `outDir`)
│ │── images
│ │ └── some-pic.png
├── src
│ ├── App.vue
│ └── index.js
└── index.htmland with App.vue:
<template>
<img src="/images/some-pic.png">
</template>src="/images/some-pic.png" should become src="/my-spa/images/some-pic.png".
Once compiled, it stays src="/images/some-pic.png":
{src:"/images/some-pic.png",alt:""}On the other side, the Vue 3 plugin for Vite compiles it fine:
var u="/vue-3-demo/images/some-pic.png"This can also be verified in the browser live by running npm run serve in /vue-2 or /vue-3.
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
export default defineConfig({
base: '/vue-2-demo/',
build: {
outDir: `./dist/vue-2-demo`,
emptyOutDir: true,
},
plugins: [createVuePlugin()],
})import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
base: '/vue-3-demo/',
build: {
outDir: `./dist/vue-3-demo`,
emptyOutDir: true,
},
plugins: [vue()],
})