Vue\React配置别名总结

1.vue项目中配置别名

vue项目中其实自带了别名，即@表示src目录。可以在node-modules/@vue/cli-service/lib/config/base.js中看到配置。

由上面贴的代码可以看见，vue在使用vue-cli（查找资料说是从vue-cli3开始的）建立项目就自动配置src的别名和文件格式的省略。

所以你如果只需要src的别名的话，就可以不用配置了。一般我还会给assets和components文件夹配置别名。

在项目根目录下新建一个vue.config.js文件。vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service (就是我们上面所说的配置了src别名的那个文件)自动加载。

然后在该文件中配置别名。使用如下代码就可：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
      }
    }
  },
}

configureWebpack

Type: Object | Function

如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。

如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

在vue.config.js中还可以配置更多内容。详见vue-cli文档

个人感觉比较常用的先总结到这里。

devServer.proxy
Type: string | Object

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

pluginOptions
Type: Object

这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。例如：

module.exports = {
  pluginOptions: {
    foo: {
      // 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
    }
  }
}

Babel
Babel 可以通过 babel.config.js 进行配置。

提示Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules 内部的依赖。我们推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。

所有的 Vue CLI 应用都使用 @vue/babel-preset-app，它包含了 babel-preset-env、JSX 支持以及为最小化包体积优化过的配置。通过它的文档可以查阅到更多细节和 preset 选项。

React中配置别名

我看见网上在react项目中对webpack的配置进行修改都需要通过yarn run eject来暴露webpack配置。但是webpack的配置暴露出来了就再也无法隐藏了。

我们可以通过craco配置去修改webpack的相关配置。

什么是craco？

首先对craco进行安装

cnpm install @craco/craco -D

安装完毕后，在react项目根目录下，建立craco.config.js。
然后进行的就是经常做的别名配置：

const path = require('path')

const resolve = pathName => path.join(__dirname, pathName)

module.exports = {
  webpack: {
    alias: {
      '@': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
    }
  }
}

最后一步，需要在package.json中对启动项目进行修改，用craco进行启动。

react中配置别名就欧克了。

我喜欢用less进行样式编写。在vue中直接将<style lang='less'></style>就可以了。而想在react中使用，就要建立xxx.module.less文件。(css Modules并不是React的特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用。如果在别的项目中使用，我们需要自行配置。将webpack.config.js的modules: true等，但是react脚手架已经内置了css modules配置，我们直接引用就可以使用了。antd-pro使用样式的原理也是如此)

我觉得xxx.module.less建立起来我看不习惯（其实我也不知道是为啥，可能是antdpro用多了）建立了这个文件还需要import styles from './index.module.less来编写样式，确实有点麻烦。

我们可以craco中添加less-loader，完成相应配置.这样就可以建立index.less文件。引入的时候直接import './index.less’就好了。可以说是非常方便了。改变antd的样式也不需要用:global进行包裹，直接用类名写样式就可以了。

先安装：

cnpm install craco-less @babel/plugin-proposal-decorators babel-plugin-import​​​​​​​ -D

const path = require('path')
const CracoLessPlugin = require('craco-less')

const resolve = pathName => path.join(__dirname, pathName)

module.exports = {
  webpack: {
    alias: {
      '@': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
    }
  },
  babel: {
    plugins: [
      ['import', { libraryName: 'antd', style: true }],
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { "@primary-color": "#1DA57A" },
            javascriptEnabled: true
          }
        }
      }
    }
  ],
}