一同学,跳槽到一家大公司,之前没有做过vue项目, 初次把玩vue,有点扎手,昨天(2019年7月12)晚上给我打电话求援,看了下他的项目,代码写的很精妙,隐隐的觉得他的项目在裸奔,因为没有任何的配置, 联想到有许多小伙伴也是只会用vue,一旦涉及到环境配置就蒙圈,于是就有了这篇文章.
这篇文章对于使用 @vue/cli 3创建vue项目, vue.config.js配置,vue项目环境配置,package.json配置自定义命令,axios请求封装,做了详细说明
温馨提示: 如果只想看配置跳过不关心环节,直接 到 "环境配置"
目录
检查环境 与 报错处理
检查环境
报错处理
使用 vue-cli 3 创建 vue 项目
配置 vue.config.js 文件
确认项目结构
项目 根目录 创建 vue.config.js 文件
作用是什么
vue.config.js 详细配置
应用场景 与 环境配置文件
环境
场景
配置 开发 环境 (测试环境自己配置, 文末有我配置好的项目可参考)
说明
配置 .env.development 文件
配置 .env.development.local 环境文件
配置 package.json 文件(实现自定义 启动命令 和 构建命令)
配置 启动开发环境自定义命令
说明
启动项目
查看当前环境变量
到此 环境配置结束
请求封装
axios 封装请求的使用
项目地址仅供小伙伴们参考学习
保证 前两个 错误 已经解决, vue 报错其实就是未安装 vue-cli3 才导致报错的 首先执行卸载命令
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。
如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),
你需要先通过
npm uninstall vue-cli -g
或
yarn global remove vue-cli
卸载它。
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
npm install -g @vue/cli
# OR
yarn global add @vue/cli
当阅读到这里 默认 你现在的电脑 环境问题已解决
# 创建 vue 项目 project
vue create project
下面跟着 截图做 就行了 (这块会了可直接跳过)
vue.config.js 是 vue cli 3 脚手架搭建项目的 特有的, 比如:请求代理, webpack 配置, 打包输出等都会在这里配置
由于 配置 项 太多 我这里 直接贴代码了, 具体配置说明看注释,配置中使用 " compression-webpack-plugin" webpack 插件 所以在这里我们需要 手动安装下 (如果不安装启动项目时会报错)
npm install compression-webpack-plugin
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
/**
* Date: 1562573921043
* author: \u535e \u5218 \u8457
* 不要 他娘的 随便 动老子的代码
* 代码 跑的 通 是 author 写的, 跑不通 就不知道了
* 小不点 你来 抓我啊~~~
* qi - si - ni
*/
const CompressionPlugin = require("compression-webpack-plugin"); //Gzip
module.exports = {
// 基本路径
publicPath: "./",
// 输出文件目录
outputDir: "dist",
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: "static",
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 如果机器有超过1个内核,则在默认情况下为生产构建中的babel&ts使用线程加载器
parallel: require("os").cpus().length > 1,
// 生产环境是否生成 sourceMap 文件,一般情况不建议打开
productionSourceMap: false,
// PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack配置 see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: config => {
// 别名配置 可进行 链式操作
config.resolve.alias
.set("@", resolve("src"))
.set("views", resolve("src/views"));
},
//调整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
configureWebpack: config => {
// 入口文件
config.entry = "./src/main.js";
// 生产 & 测试环境
let pluginsPro = [
new CompressionPlugin({
//文件开启Gzip,也可以通过服务端(如:nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
filename: "[path].gz[query]",
algorithm: "gzip",
test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"),
threshold: 8192,
minRatio: 0.8
})
];
// 为生产环境修改配置...process.env.NODE_ENV !== 'development'
if (process.env.NODE_ENV !== "development") {
config.plugins = [...config.plugins, ...pluginsPro];
}
},
// 入口文件 可 单独进行配置 写法如下
// configureWebpack: {
// entry: './src/view/index/main.js',
// },
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// webpack-dev-server 相关配置
devServer: {
open: true, // 是否 自动打开浏览器 在项目启动的时候
host: "",
port: 8080, // 端口
https: false,
hotOnly: false,
// 设置代理
// 这里设置了两个代理请求 为了匹配 不同环境的, 根据实际情况配置代理
// 比如 公司有 开发 连调 测试 演示 生产等环境, 除了生产环境以外其他环境都需要配置 代理请求
// 当启动 vue 项目的 时候 运行在 localhost:8080 上,假设公司的 开发环境 为 http://development.com 当发送请求时 就会发生跨域, 所以 采用代理方式 进行 同域,
// 当 项目上线 后 根据 环境变量 使用不同 的域名 就不会有跨域情况
// 读到这里 如果 还有 不理解 请往下进行
proxy: {
"/dev": {
target: process.env.VUE_APP_URL, // 代理请求的地址 => https://api.apiopen.top/
changeOrigin: true,
pathRewrite: {
"^/dev": ""
}
},
"/api": {
target: process.env.VUE_APP_URL,
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}
},
// 第三方插件配置
pluginOptions: {}
};
场景一:
假设你们公司开了一个新项目,你负责登录功能(login), 用户中心(usercenter)两个功能,
后台给了你开发环境的的登录接口(http://dev/login), 你调用接口的时候发现报错了->跨域,
这是为什么呢? 百度一下,知道 localhost:8080 与 http://dev/login 不同域 所以报错,
需要做代请求(这个在vue.config.js中有配置说明)
场景二:
假设场景一的跨域问题解决了,当你 调用开发环境的登录接口 (http://dev/login) 返回 500,
后端人员说开发环境宕机了,让你调用联调环境的登录接口接口(http://liantiao/login),
你把代码中的 http://dev/login 换成了 http://liantiao/login
场景三:
假设 登录功能和个人中心功能都开发完成了, 可以上到测试环境(http://test.com/login),
让测试工程师测试了,你把 代码中的 http://liantiao/login 换成了 http://test/login,
上到测试后,你自测了下开发的功能,发现忘记把用户中心接口,换成测试环境的了,
然后你把代码中的 http://liantiao/usercenter 换成了测试环境的用户中心接口 http://test/usercenter 完美解决
场景四:
假设上面问全部解决了,可以上到演示环境(http://demo/login & http://demo/usercenter)给产品经理验收了,
崩溃了,老了需要把代码中所有的 http://test/login 换成 http:demo/login;
http://test/usercenter 换成 http://demo/usercenter 然后打包上到演示环境,
感慨句 -- 好他妈麻烦
有没有感觉上面场景中的你做实在太 low,有没有什么办法可以优雅的解决上面的问题呢?
当然有了,使用环境配置文件, 和自定义命令就可以了
我们下面会 以 开发 和 测试 两个环境为例, 进行环境配置的讲解
创建 .env.development 和 .env.development.local 环境文件
在哪里创建: 项目根目录
作用是什么: 环境变量文件, 比如 现在启动 vue 项目要链接 开发 环境的接口,
vue 就会自动读取 .env.development.local 中的环境变量,
如果打包上线到开发环境 vue将自动读取.env.development 中的环境变量
在文末会有我配置好的项目地址,供大家参考或使用, 为了把所有的配置文件上传到 github 上,
我将 .gitignore 中 ".env.local " 和 ".env.*.local" 类型的忽略文件注释掉了,
如果你要使用本项目作为开发基本配置,
采用 svn 版本控制的需要将 带有.local的文件加入忽略列表,
采用git版本控制的 将图片中的 忽略类型去掉即可
NODE_ENV=development
VUE_APP_TITLE=line
VUE_APP_URL=https://api.apiopen.top/
NODE_ENV=development
VUE_APP_TITLE=local
VUE_APP_URL=https://api.apiopen.top/
VUE_APP_PROXY=/dev
到此 开发 环境配置告一段落, 后面还会有一些剩余的开发环境配置, 接下来讲配置自定义命令
在项目根目录打开 package.json 文件, 接下来我们将自定义 命令 实现通过命令启动运行不同环境(请确保你的文件与截图一致)
在 script 脚本中添加 如下命令
# 启动 本地 开发环境
"serve-dev": "vue-cli-service serve --mode development"
# 打包 线上 开发环境
"build-dev": "vue-cli-service build --mode development"
当 我们 在终端中输入 npm run serve-dev 命令时, 会通过 --mode 传入模式(也就是环境变量),
vue 会根据传入的模式读取对应的环境文件, 我们这里传入的模式为 development,
当执行 npm run serve-dev 命令时就会读取 .env.elopment.local 中的环境变量,
这个操作会在 vue 编译前就注入到项目中,
我们可以通过 node 暴露的 全局变量 process.env.NODE_ENV 拿到当前环境变量,
# 打开终端 键入 我们在 package.json 中配置的 开发环境启动命令
npm run serve-dev
下图 红框处就是我们传入的 模式 , 蓝色 info 启动 开发 服务
# 下面的封装请求 会 用到 axios 和 qs 这两个工具, 在封装请求前先手动安装他们
# axios 作用: 跟 ajax 就是发送请求的一个工具
# qs 作用: 当我们发送 post 请求时,有可能对携带的参数进行序列化(qs 就是干这个的)
npm install axios --save
npm install qs --save
// public/fetch.js
var qs = require("qs");
import axios from "axios";
// baseurl 就是 在 .env.development 和 .env.development.local 中 预设的域名
console.log(process.env.VUE_APP_URL); // => 'https://api.apiopen.top/'
let baseurl =
process.env.VUE_APP_TITLE === "local" // 通过判断 当前的环境变量 得知 项目 运行在 本地 或者 线上
? process.env.VUE_APP_PROXY // 本地 使用代理 => '/dev' 此处在 vue.config.js 中代理请求处有配置
: process.env.VUE_APP_URL; // 线上 使用域名 => 'https://api.apiopen.top/'
console.log("baseurl", baseurl);
axios.defaults.baseURL = baseurl; // 将 baseurl 设置为 axios 的默认 baseURL
/**
* 下面 是 axios 封装的 请求
* 采用 es6 promise 和 async await 方式
*/
export default async (url = "", data = {}, type = "POST") => {
type = type.toUpperCase();
/**
* get 请求
*/
if (type == "GET") {
//请求参数 拼接字符串
let dataStr = "";
Object.keys(data).forEach(key => {
dataStr += key + "=" + data[key] + "&";
});
if (dataStr !== "") {
dataStr = dataStr.substr(0, dataStr.lastIndexOf("&"));
url = url + "?" + dataStr;
}
return new Promise((resolve, reject) => {
axios
.get(url)
.then(res => {
console.log(res);
resolve(res.data);
})
.catch(err => {
reject(err);
});
});
}
/**
* post 请求
*/
if (type == "POST") {
return new Promise((resolve, reject) => {
data = qs.stringify(data);
axios
.post(url, data)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err);
});
});
}
};
// 引入 封装请求
import fetch from "../public/fetch.js";
/**
* 作用: getData.js 用于请求的集中管理
* 假设: 你的项目 有 100 个接口,散落在项目中,很难进行管理, 我们需要把这 100个接口进行集中管理
*/
/**
* 获取最新 消息(其他接口也要按照这种格式写)
*/
export const getWangYiNews = data => fetch("getWangYiNews", data, "get");