webstorm識別webpack中的@別名

webstorm識別webpack中的@別名

方法一(推薦):

不須要配置.直接導入node_modules/@vue/cli-service/webpack.config.js.內容以下:

// 這是原生的,不須要寫入任何配置.
// this file is for cases where we need to access the
// webpack config as a file when using CLI commands.

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

module.exports = service.resolveWebpackConfig()

方法二:

本身新建一個配置,而後在webpack中設置使用該配置(新版本的webstorm中已失效)

'use strict'
const path = require('path')

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

module.exports = {
    context: path.resolve(__dirname, './'),
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('src'),
            '@views': resolve('src/views'),
            '@comp': resolve('src/components'),
            '@core': resolve('src/core'),
            '@utils': resolve('src/utils')
        }
    }
}