vue.config.js 文件中怎么配置别名 @

在 vue.config.js 文件中配置别名 @，可以使用以下代码：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

这里的 path 是 Node.js 的内置模块，所以需要在文件头部引入：

const path = require('path')

这样配置之后，就可以在项目中直接使用 @ 符号来代替 src 目录的路径了，比如：

import { someModule } from '@/components/someModule'

相关问题

vue3 vue.config.js配置路径别名

### 回答1：
在Vue.js 3中，我们可以使用vue.config.js文件来配置路径别名。路径别名可以让我们在导入模块时使用自定义的快捷方式。

首先，在项目的根目录下创建vue.config.js文件，如果该文件已存在可以跳过此步骤。

然后，打开vue.config.js文件，我们需要使用module.exports导出一个对象。具体的配置如下：

module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src') // 这里的'@'表示src目录的绝对路径
}
}
}
}

在这个配置中，我们使用resolve.alias来配置路径别名。在这个例子中，我们将'@'符号配置为src目录的绝对路径，这样在代码中导入模块时，我们可以使用'@'符号来代替src目录的路径。

例如，如果我们有一个名为HelloWorld.vue的组件文件在src/components目录下，我们可以在其他组件中使用以下方式导入它：

import HelloWorld from '@/components/HelloWorld'

这样，在代码中使用路径别名可以让我们更方便地引用和管理模块路径，提高开发效率。

### 回答2：
在Vue3中，我们可以通过修改vue.config.js文件来配置路径别名。路径别名允许我们在引用文件时使用简短的别名而不是完整的路径。

首先，在项目根目录下创建一个vue.config.js文件。如果该文件已存在，则直接打开。

然后，在vue.config.js文件中添加以下代码：

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        // 添加其他路径别名
        // 比如：'@components': path.resolve(__dirname, 'src/components')
      },
    },
  },
};

以上代码中，我们使用了Node.js的path模块来处理路径，我们先导入了path模块。

然后，在configureWebpack配置中，我们使用resolve对象来配置路径别名。alias字段表示路径别名，它是一个对象，包含我们定义的别名。

@代表src目录的路径。这样我们就可以在引用文件时使用@代替src，例如import App from '@/App'。

如果你还想添加其他路径别名，可以继续在alias对象中添加键值对。键表示别名，值表示目标路径。

最后，将上述代码保存并关闭vue.config.js文件。

现在，我们在Vue项目中就可以使用路径别名了。无论是在组件中还是在其他文件中引用，我们都可以使用别名来代替完整的路径，使代码更加简洁易读。

### 回答3：
在Vue3中，我们可以通过配置vue.config.js文件来设置路径别名。

首先，我们需要在项目根目录下创建一个vue.config.js文件。如果该文件已存在，可以直接编辑它。

然后，在vue.config.js文件中添加如下代码：

const path = require('path');

module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src')) // 设置@别名，将src目录路径映射为@
      .set('components', path.resolve(__dirname, 'src/components')) // 设置components别名，将src/components目录路径映射为components
      .set('views', path.resolve(__dirname, 'src/views')) // 设置views别名，将src/views目录路径映射为views
      // 可以继续设置其他路径别名
  },
};

以上代码中，我们使用了Node.js的path模块来处理路径，需要先通过require引入。

然后，我们使用了chainWebpack配置项来进行路径别名的设置。其中，config.resolve.alias用于设置路径别名，set方法用于给别名起名，并传入对应的路径。

在上述代码中，我们添加了三个路径别名，分别是`@`、`components`和`views`。其中`@`代表项目根目录下的src目录，`components`代表src目录下的components目录，`views`代表src目录下的views目录。

你可以根据需要设置其他路径别名，只需修改set方法中的别名和路径即可。

配置完vue.config.js后，保存文件并重新运行项目，就可以在Vue组件中使用路径别名了。例如，要引入src目录下的一个组件，可以这样写：`import Example from '@/components/Example';`

vue2 vue.config.js文件最全配置加每一行配置语句的注释注释

以下是一个包含注释的最全的 vue.config.js 文件配置：

module.exports = {
  // 项目部署的基础路径，配置如：/my-app/，则打包后所有资源路径都会加上这个前缀，可以配置为相对路径"./"
  publicPath: '/',

  // 输出文件目录，默认值为'dist'，生产环境构建文件的目录
  outputDir: 'dist',

  // 静态资源目录（js、css、img、fonts），相对于outputDir的路径
  assetsDir: 'static',

  // eslint-loader 是否在保存的时候检查，true为检查，false为不检查
  lintOnSave: true,

  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,

  // 生产环境sourceMap
  productionSourceMap: false,

  // webpack配置
  configureWebpack: {
    // 设置别名
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },

  // vue-loader配置
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')

    // 添加新的svg-sprite-loader处理svgIcon
    config.module
      .rule('svgIcon')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // 修改images loader，添加svg处理
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .exclude.add(resolve('src/icons'))
      .end()

    // 对vue-cli内部的webpack配置进行更细粒度的修改
    // https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          // 生产环境配置
        }
      )
      .when(process.env.NODE_ENV === 'development',
        config => {
          // 开发环境配置
        }
      )
  },

  // CSS相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,

    // 开启 CSS source maps
    sourceMap: false,

    // css预设器配置项
    loaderOptions: {
      // sass-loader配置
      sass: {
        // 全局注入变量和mixin
        data: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixin.scss";
        `
      }
    },

    // 启用 CSS modules for all css / pre-processor files.
    requireModuleExtension: false
  },

  // 开发服务配置
  devServer: {
    // 端口号
    port: 8000,

    // 启动时自动打开浏览器
    open: true,

    // 反向代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' }
      }
    }
  },

  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}

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