使用 Vue CLI 创建的 Vue 3 项目中配置@别名遇到了问题ERROR Invalid options in vue.config.js: “resolve“ is not allowed

使用 Vue CLI 创建的 Vue 3 项目中遇到了问题，当你尝试在 vue.config.js 文件中配置 resolve 选项时出现了错误提示。这是因为 resolve 选项并不是 Vue CLI 配置文件 vue.config.js 的一部分。

错误提示

这是因为在vue.config.js中配置

 resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 这里将 @ 设置为 src 目录的别名
    },
  },

报错原因 这里的resolve方法在vite的搭建的项目中可以直接使用 但是在vue-CLI创建的vue3中不能直接拿过来使用

解决方法

const { defineConfig } = require('@vue/cli-service');
const path = require('path');
module.exports = defineConfig({
	transpileDependencies: true,
	lintOnSave: true,
	devServer: {
		port: 9527,
		open: true
	},
	chainWebpack: (config) => {
		config.resolve.alias
			.set('@', resolve('src')) // 设置 @ 为 src 目录的别名
			.end();
	}
});

function resolve(dir) {
	return path.join(__dirname, dir);
}

**在这个例子中，我们定义了一个 chainWebpack 函数来修改 Webpack 的配置。chainWebpack 函数接收一个 WebpackChain 对象作为参数，该对象允许我们链式地调用方法来修改 Webpack 的配置。

具体来说，我们设置了 resolve.alias.set(‘@’, resolve(‘src’))，这会告诉 Webpack 使用 @ 作为 src 目录的别名。

确保你的项目中有 path 模块，如果还没有引入，记得加上 const path = require(‘path’);。**

现在你应该能够在项目中使用 @ 别名了，例如：

// 在 main.js 中使用
import HelloWorld from '@/components/HelloWorld.vue';