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

如果有更精闢的見解歡迎評論留言探討，一起探討，一起進步！若回覆不及時可聯繫：