vue全家桶项目搭建之三——vue cli4.0+中使用proxy配置代理转发以及配置使用@路径引入和eslint配置

目录

一、vue cli4.0+中使用proxy配置代理转发

二、配置使用@路径引入

三、改变vue项目启动的端口号和 项目启动时自动在浏览器中打开

四、vue-cli 3.x和4.x中eslint配置

---

一、vue cli4.0+中使用proxy配置代理转发

这个比较的重要，所以单独提出来

首先在demo的根目录下面新建vue.config.js一个文件，注意是新建，vue-cli3.0以后没有这个文件了所以需要自己新建一个

如图：
 

module.exports = {
  
  devServer: {
    proxy: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://10.111.45.242',   //代理接口（ps:这里为随意打的地址）
        changeOrigin: true,
        //pathRewrite: {
         // '^/api': ''    //代理的路径 //是否移除api三个字段,这里我不需要移除，所以注释，具体根据自己的项目前后端来看
        //}
      }
    }
  }
}

效果：

以下是关于此文件的其他配置

二、配置使用@路径引入

1.vue导入路径简化用@来代替../../等得配置，也就是使用@路径引入

同样在 vue.config.js

 configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'views': '@/views',
      }
    }
  },

使用：

import request from '@/uitls/request'

之前的2.X当中是在build 文件夹下找到 webpack.base.conf.js 文件

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

但是由于3.x以后就将webpack进行了再次封装，所以就没有了webpack.base.conf.js这个文件

则在上一个里面进行新增configureWebpack

这里其实利用了3.X+甚至4.x中/node_modules/@vue/cli-service/lib/config/base.js中已经配好的@路径,有兴趣的可以进入文件里面看一看

webpackConfig.resolve
      // This plugin can be removed once we switch to Webpack 6
      .plugin('pnp')
        .use({ ...require('pnp-webpack-plugin') })
        .end()
      .extensions
        .merge(['.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'])
        .end()
      .modules
        .add('node_modules')
        .add(api.resolve('node_modules'))
        .add(resolveLocal('node_modules'))
        .end()
      .alias
        .set('@', api.resolve('src'))
        .set(
          'vue$',
          options.runtimeCompiler
            ? 'vue/dist/vue.esm.js'
            : 'vue/dist/vue.runtime.esm.js'
        )

三、改变vue项目启动的端口号和 项目启动时自动在浏览器中打开

 //webpack - dev - server 的配置项
  devServer: {
    //   disableHostCheck: true,
    port:8080,//改变端口号
    open: true, //配置自动启动浏览器
    proxy: {
      '/api': {
        target: 'http://10.121.47.xxx:8000', //对应自己的接口此处地址瞎写的
        changeOrigin: true,
        ws: true,
        //   pathRewrite: { //是否移除api三个字段
        //     '^/api': ''
        //   }
      }
    }

完整vue.config.js

/*
 * @Author:jona
 * @Date: 2020-05-11 14:31:16
 * @LastEditTime: 2020-05-13 15:40:31
 * @LastEditors: Please set LastEditors
 * @Description: 代理转发配置
 * @FilePath: \vuedemo\babel.config.js
 */
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'views': '@/views',
      }
    }
  },
  //webpack - dev - server 的配置项
  devServer: {
    //   disableHostCheck: true,
    port:8080,
    open: true, //配置自动启动浏览器
    proxy: {
      '/api': {
        target: 'http://10.x11.x1.xxx:8000', //对应自己的接口
        changeOrigin: true,
        ws: true,
        //   pathRewrite: { //是否移除api三个字段
        //     '^/api': ''
        //   }
      }
    }
  },
  
  // 部署应用时的基本 URL
  // baseUrl: process.env.NODE_ENV === 'production' ? 'https://api.xxxxxx.cn' : 'http://192.168.0.220',
  outputDir: 'dist1',  // 构建输出目录
  assetsDir: 'static',// 静态资源目录 (js, css, img, fonts)
  runtimeCompiler: undefined,// 运行时版本是否需要编译
  productionSourceMap: false,// 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
  parallel: undefined,// 构建时开启多进程处理babel编译
  css: undefined, //配置编译css规则
}

四、vue-cli 3.x和4.x中eslint配置

此处拿出来的原因是相比2.Xeslint的配置提到了package.json中进行了配置

在eslintConfig中进行配置，具体的根据自己的习惯在rules中进行配置，配置规则参照

https://blog.csdn.net/qq_34645412/article/details/78974413

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/recommended", "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "vue/max-attributes-per-line": [2, {
        "singleline": 10,
        "multiline": {
          "max": 1,
          "allowFirstLine": false
        }
      }],
      "vue/name-property-casing": ["error", "PascalCase"],
      "accessor-pairs": 2,
      "arrow-spacing": [2, {
       "before": true,
       "after": true
      }],
     "block-spacing": [2,"always"],
     "brace-style": [2,"1tbs", {
       "allowSingleLine": true
      }],
     "camelcase": [0, {
       "properties":"always"
      }],
     "comma-dangle": [2,"never"],
     "comma-spacing": [2, {
       "before": false,
       "after": true
      }],
     "comma-style": [2,"last"],
     "constructor-super": 2,
     "curly": [2,"multi-line"],
     "dot-location": [2,"property"],
     "eol-last": 2,
     "eqeqeq": [2,"allow-null"],
     "generator-star-spacing": [2, {
       "before": true,
       "after": true
      }],
     "handle-callback-err": [2,"^(err|error)$"],
     "indent": [2, 2, {
       "SwitchCase": 1
      }],
     "jsx-quotes": [2,"prefer-single"],
     "key-spacing": [2, {
       "beforeColon": false,
       "afterColon": true
      }],
     "keyword-spacing": [2, {
       "before": true,
       "after": true
      }],
     "new-cap": [2, {
       "newIsCap": true,
       "capIsNew": false
      }],
     "new-parens": 2,
     "no-array-constructor": 2,
     "no-caller": 2,
     "no-console":"off",
     "no-class-assign": 2,
     "no-cond-assign": 2,
     "no-const-assign": 2,
     "no-control-regex": 0,
     "no-delete-var": 2,
     "no-dupe-args": 2,
     "no-dupe-class-members": 2,
     "no-dupe-keys": 2,
     "no-duplicate-case": 2,
     "no-empty-character-class": 2,
     "no-empty-pattern": 2,
     "no-eval": 2,
     "no-ex-assign": 2,
     "no-extend-native": 2,
     "no-extra-bind": 2,
     "no-extra-boolean-cast": 2,
     "no-extra-parens": [2,"functions"],
     "no-fallthrough": 2,
     "no-floating-decimal": 2,
     "no-func-assign": 2,
     "no-implied-eval": 2,
     "no-inner-declarations": [2,"functions"],
     "no-invalid-regexp": 2,
     "no-irregular-whitespace": 2,
     "no-iterator": 2,
     "no-label-var": 2,
     "no-labels": [2, {
       "allowLoop": false,
       "allowSwitch": false
      }],
     "no-lone-blocks": 2,
     "no-mixed-spaces-and-tabs": 2,
     "no-multi-spaces": 2,
     "no-multi-str": 2,
     "no-multiple-empty-lines": [2, {
       "max": 1
      }],
     "no-native-reassign": 2,
     "no-negated-in-lhs": 2,
     "no-new-object": 2,
     "no-new-require": 2,
     "no-new-symbol": 2,
     "no-new-wrappers": 2,
     "no-obj-calls": 2,
     "no-octal": 2,
     "no-octal-escape": 2,
     "no-path-concat": 2,
     "no-proto": 2,
     "no-redeclare": 2,
     "no-regex-spaces": 2,
     "no-return-assign": [2,"except-parens"],
     "no-self-assign": 2,
     "no-self-compare": 2,
     "no-sequences": 2,
     "no-shadow-restricted-names": 2,
     "no-spaced-func": 2,
     "no-sparse-arrays": 2,
     "no-this-before-super": 2,
     "no-throw-literal": 2,
     "no-trailing-spaces": 2,
     "no-undef": 2,
     "no-undef-init": 2,
     "no-unexpected-multiline": 2,
     "no-unmodified-loop-condition": 2,
     "no-unneeded-ternary": [2, {
       "defaultAssignment": false
      }],
     "no-unreachable": 2,
     "no-unsafe-finally": 2,
     "no-unused-vars": [2, {
       "vars":"all",
       "args":"none"
      }],
     "no-useless-call": 2,
     "no-useless-computed-key": 2,
     "no-useless-constructor": 2,
     "no-useless-escape": 0,
     "no-whitespace-before-property": 2,
     "no-with": 2,
     "one-var": [2, {
       "initialized":"never"
      }],
     "operator-linebreak": [2,"after", {
       "overrides": {
         "?":"before",
         ":":"before"
        }
      }],
     "padded-blocks": [2,"never"],
     "quotes": [2,"single", {
       "avoidEscape": true,
       "allowTemplateLiterals": true
      }],
     "semi": [2,"never"],
     "semi-spacing": [2, {
       "before": false,
       "after": true
      }],
     "space-before-blocks": [2,"always"],
     "space-before-function-paren": [2,"never"],
     "space-in-parens": [2,"never"],
     "space-infix-ops": 2,
     "space-unary-ops": [2, {
       "words": true,
       "nonwords": false
      }],
     "spaced-comment": [2,"always", {
       "markers": ["global","globals","eslint","eslint-disable","*package","!",","]
      }],
     "template-curly-spacing": [2,"never"],
     "use-isnan": 2,
     "valid-typeof": 2,
     "wrap-iife": [2,"any"],
     "yield-star-spacing": [2,"both"],
     "yoda": [2,"never"],
     "prefer-const": 2,
     "array-bracket-spacing": [2,"never"]
    }
    
  },

接下来我们看 vue全家桶项目搭建之四——vue 中配置vuex

如果有更精辟的见解欢迎评论留言探讨，一起探讨，一起进步！若回复不及时可联系：