During the transition of my project from Vue CLI to Vite, I encountered a similar issue. To address it, I devised a workaround using a custom Node.js script that involves tweaking some configurations:
const path = require('path')
const replace = require('replace-in-file')
const fs = require('fs')
const FILES_TO_MODIFY_GLOB = 'src/**/*.*'
const CUSTOM_ALIAS_PATH = '@/'
const CUSTOM_ALIAS_DESTINATION = 'src/'
const updateImportsWithoutVueExtension = /^import \w+( as \w+)? from '(.*?)(?<!\.vue)'$/gm
let modifiedFilesCount = 0
console.log('\nUpdating imports...\n')
replace.sync({
//dry: true,
encoding: 'utf8',
files: FILES_TO_MODIFY_GLOB,
from: updateImportsWithoutVueExtension,
to: (match, g1, importPath, offset, string, file) => {
const isExternalImport = /^\w/.test(importPath)
if (isExternalImport) return match
const currentDir = path.dirname(file)
const isCustomAliasPath = new RegExp('^' + CUSTOM_ALIAS_PATH).test(importPath)
let updatedImportPath = isCustomAliasPath
? importPath.replace(CUSTOM_ALIAS_PATH, CUSTOM_ALIAS_DESTINATION)
: path.resolve(currentDir, importPath)
const isVueFilePresent = fs.existsSync(updatedImportPath + '.vue')
if (!isVueFilePresent) return match
const newImport = importPath + '.vue'
modifiedFilesCount++
console.log(`${file} import altered to ${newImport}`)
return match.replace(importPath, newImport)
}
})
console.log('\n' + modifiedFilesCount + ' updates were successfully made.')
To use this solution, you'll first need to temporarily install this package as a dependency in your project:
npm i replace-in-file
Subsequently, execute the script with the following command:
node <scriptName>.js
I trust that this workaround will assist others facing a similar challenge down the line.