"scripts": { "dev": "vue-cli-service serve --project-mode dev", "test": "vue-cli-service serve --project-mode test", "pro": "vue-cli-service serve --project-mode pro", "pre": "vue-cli-service serve --project-mode pre", "build:dev": "vue-cli-service build --project-mode dev", "build:test": "vue-cli-service build --project-mode test", "build:pro": "vue-cli-service build --project-mode pro", "build:pre": "vue-cli-service build --project-mode pre", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },
同时修改vue.config.js：
const path = require('path') function resolve(dir) { return path.join(__dirname, './', dir) } module.exports = { chainWebpack: config => { // 这里是对环境的配置，不同环境对应不同的BASE_API，以便axios的请求地址不同 config.plugin('define').tap(args => { const argv = process.argv const mode = argv[argv.indexOf('--project-mode') + 1] args[0]['process.env'].MODE = `"${mode}"` args[0]['process.env'].BASE_API = '"http://47.94.138.75:8000"' return args }) // svg loader const svgRule = config.module.rule('svg') // 找到svg-loader svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录 svgRule // 添加svg新的loader处理 .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) // 修改images loader 添加svg处理 const imagesRule = config.module.rule('images') imagesRule.exclude.add(resolve('src/icons')) config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) } }
如何使用？ 我比较建议在 src/ 下创建 api 目录，用来统一管理所有的请求，比如下面这样： ‘'
这样的好处是方便管理、后期维护，还可以和后端的微服务对应，建立多文件存放不同模块的 api 。剩下的就是你使用到哪个api时，自己引入便可。
拓展：服务端的cors设置
牵涉到跨域，这里采用 cors ，很多朋友在面试中经常会被问到cors的实现原理，这个网上有很多理论大多是这样讲的：
其实，这样理解很抽象，服务器端到底是怎么做验证的？
这里大家可以通俗的理解为后端在接收前端的 request 请求的时候，会有一个 request 拦截器，像 axios response 拦截器一样。下面以 php lumen 框架为例，来深入理解一下这个流程：
<?php namespace App\Http\Middleware; use App\Http\Utils\Code; use Closure; use Illuminate\Http\Response; use Illuminate\Support\Facades\Log; class CorsMiddleware { private $headers; /** * 全局 ： 解决跨域 * @param $request * @param \Closure $next * @return mixed * @throws \HttpException */ public function handle($request, Closure $next) { //请求参数 Log::info('http request：'.json_encode(["request_all" => $request->all()])); $allowOrigin = [ 'http://47.94.138.75', 'http://localhost', ]; $Origin = $request->header("Origin"); $this->headers = [ 'Access-Control-Allow-Headers' => 'Origin,x-token,Content-Type', 'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Credentials' => 'true',//允许客户端发送cookie 'Access-Control-Allow-Origin' => $Origin, //'Access-Control-Max-Age' => 120, //该字段可选，间隔2分钟验证一次是否允许跨域。 ]; //获取请求方式 if ($request->isMethod('options')) { if (in_array($Origin, $allowOrigin)) { return $this->setCorsHeaders(new Response(json_encode(['code' => Code::SUCCESS, "data" => 'success', "msg" => ""]), Code::SUCCESS)); } else { return new Response(json_encode('fail', 405)); } } $response = $next($request); //返回参数 Log::info('http response：'.json_encode($response)); return $this->setCorsHeaders($response); } /** * @param $response * @return mixed */ public function setCorsHeaders($response) { foreach ($this->headers as $key => $val) { $response->header($key, $val); } return $response; } }
vuex 篇