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
https://blog.csdn.net/qq_34645412/article/details/106119609
如果有更精辟的见解欢迎评论留言探讨，一起探讨，一起进步！若回复不及时可联系：
