Vue CLI 配置(持续更新)

设置缩进为4个空格

• 修改.eslintrc.js文件

module.exports = {
    // 省略其他代码
    rules: {
        // 省略其他代码
        'indent': ['error', 4, {
            'SwitchCase': 1
        }]
    },
    // 省略其他代码
}

• 修改.editorconfig文件

注意修改两个地方[第一行 添加您需要格式化文件类型的后缀名]

修改第三行 indent_size 的值 为 4

[*.{js,jsx,ts,tsx,vue,json,less,css}]
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
insert_final_newline = true

全局less变量设置

• 安装依赖

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

• 修改vue.config.js

const path = require('path');
module.exports = {
    lintOnSave: false,
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                // 需要全局导入的less路径
                path.resolve(__dirname, './src/styles/variables.less'),
                path.resolve(__dirname, './src/styles/global.less')
            ]
        }
    }
}

开发环境开启SourceMap

• vue.config.js 添加configureWebpack项

module.exports = {
    // 省略其他配置
    configureWebpack: config => {
        if(process.env.NODE_ENV !== 'production') {
            config.devtool = "source-map";
        }
    },
    // 省略其他配置
}

开发环境代理设置

• vue.config.js 添加devServer项

module.exports = {
    // 省略其他配置
    devServer: {
        open: true,
        proxy: {
            "/api": {
                // 代理地址
                target: 'http://localhost:3000',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    // 路径重写
                    "^/api": ""
                }
            }
        }
    },
    // 省略其他配置
}

• 修改 axios.js 的 config参数 根据环境设置不同的baseURL

let config = {
    baseURL: process.env.NODE_ENV === "production" ? "" : "/api",
    timeout: 60 * 1000, // Timeout
}
const instance = axios.create(config)

Vue CLI 和 json-server配置同时运行

• 安装 json-server

npm install json-server --save-dev

• 安装 concurrently

npm install concurrently --save-dev

• src下创建mocks文件夹
• src/mocks下继续创建data文件夹
• src/mocks/data下继续创建users.json文件, 内容如下

{
  "code": 0,
  "message": "success",
  "body": [
    {
      "name": "Thanos",
      "birthday": "2999-07-03",
      "email": "thanos@aliyun.com",
      "city": "Titan",
      "tel": "8148-02100976",
      "password": "123456"
    }
  ]
}

• src/mocks下创建db.js文件, 内容如下

module.exports = {
  users: require("./data/users.json")
};

• src/mocks下创建index.js文件, 内容如下

const jsonServer = require("json-server");
const server = jsonServer.create();
const db = require("./db");
const middlewares = jsonServer.defaults();
server.use(middlewares);

// 路径重写 暂时不需要
// server.use(jsonServer.rewriter({
//   '/users': '/users'
// }))

server.use(jsonServer.router(db));
server.listen(3000, () => {
  console.log("JSON Server is running");
});

• 修改 package.json文件

scripts 中添加 dev

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "concurrently \"vue-cli-service serve\" \"node ./src/mocks/index.js\""
  }
}