vue2 VSCode代码定位神器

npm i code-inspector-plugin -D 在 vue.config.js 配置

const { codeInspectorPlugin } = require('code-inspector-plugin');  // 引入插件
module.exports = {
	configureWebpack: {
		plugins: [
			//代码定位器插件
			codeInspectorPlugin({
				bundler: 'webpack', // 配置插件
			})
		]
	},
}

vue.config.js参考配置

// 这里省略原有其他配置...
const { codeInspectorPlugin } = require('code-inspector-plugin');  // 引入插件
module.exports = defineConfig({
	// 这里省略原有其他配置...
	configureWebpack: {
		// 这里省略原有其他配置...
		plugins: [
			// 这里省略原有其他配置...
			codeInspectorPlugin({
				bundler: 'webpack', // 配置插件
			})
		]
	}
});

Webpack的插件配置，还有一种chainWebpack写法是这样的

const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = {
  // 这里省略原有其他配置...
  chainWebpack: (config) => {
    config.plugin('code-inspector-plugin').use(
      codeInspectorPlugin({
        bundler: 'webpack',
      })
    );
  },
};

使用方法 提示是shift + option。如果你是Windows用户，对应的应该是shift + alt键