配置路径

当页面嵌套过深时我们会发现在路径通常都要这么写 import xx from './../../../xxx/qqq'
通过配置webpack可以写成 import xx from '@/xxx/qqq'

@H_502_9@// 修改 webpack.config.dev 与 webpack.config.prod 两个文件 加入相同配置 ... // +++ 找个开心的地方加入配置 function resolve(dir) { return path.join(__dirname,'..',dir) } // 修改 alias: { 'react-native': 'react-native-web',// +++ 加入配置 '@': resolve('src') }

• 优点: 如果按照相对路径的方法引用，每次要计算.. 并且文件一旦迁移 那么又要重新计算，如此配置文件迁移也不需要计算

• 缺点: 在部分编辑器可能会失去文件引用高亮，但并不影响.

注 :这属于webpack的配置，当然在vue-cli中也适用

按需引用atnd-mobile

• 先安装 babel-plugin-import

npm i babel-plugin-import -D

@H_502_9@// pageage.json 文件 "babel": { "presets": [ "react-app" ],// 加入配置 "plugins": [ ["import",{ "libraryName": "antd-mobile","style": "css" }] ] },

设置代理

在开发中往往是跨域请求的，配置一下请求代理可以解决这个问题

@H_502_9@// pageage.json 文件 "proxy": "http://xxx.xxx",

css局部化

• 正常导入css情况下会污染到全局

• 修改 webpack-config-dev.js 配置 (如没有该文件请使用npm run eject 弹出)

@H_502_9@options: { modules: true,localIdentName: '__[local]--[hash:base64:5]' }

支持装饰器写法

• 安装 transform-decorators-legacy

npm install --save-dev babel-plugin-transform-decorators-legacy

@H_502_9@// pageage.json 文件 在刚刚配置 ant 下面加上 "babel": { "presets": [ "react-app" ],"plugins": [ ...ant配置,// 加入配置 "transform-decorators-legacy" ] } 原文链接：https://www.f2er.com/react/302276.html