vue3项目(项目搭建, 环境配置, vue.config.js, pakeage.json配置, 请求封装)
一同学,跳槽到一家大公司,之前没有做过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 封装请求的使用
项目地址仅供小伙伴们参考学习
-
检查环境 与 报错处理
检查环境
- 打开 cmd 依次输入 如下 命令
# node 检测 node -v # npm 检测 npm -v # vue-cli 脚手架检测 vue -V - 如果一切顺利 将 看到 下面截图 效果
报错处理
- node 报错: 自行处理
- npm 报错: 自行处理
- vue 报错: 简单处理
保证 前两个 错误 已经解决, 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 版本。 - 安装 @vue/cli (接下来 我 将 使用npm安装, 推荐使用npm安装)
npm install -g @vue/cli # OR yarn global add @vue/cli
-
使用 vue-cli 3 创建 vue 项目
当阅读到这里 默认 你现在的电脑 环境问题已解决
- 在 cmd 中 输入
# 创建 vue 项目 project vue create project下面跟着 截图做 就行了 (这块会了可直接跳过)
- 关于使用cli3创建vue项目更详细的 教程 请看 @vue/cli 创建vue项目
-
配置 vue.config.js 文件
-
确认项目结构
-
项目 根目录 创建 vue.config.js 文件
-
作用是什么
vue.config.js 是 vue cli 3 脚手架搭建项目的 特有的, 比如:请求代理, webpack 配置, 打包输出等都会在这里配置 -
vue.config.js 详细配置
由于 配置 项 太多 我这里 直接贴代码了, 具体配置说明看注释,配置中使用 " compression-webpack-plugin" webpack 插件 所以在这里我们需要 手动安装下 (如果不安装启动项目时会报错)
npm install compression-webpack-pluginconst 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版本控制的 将图片中的 忽略类型去掉即可
-
配置 .env.development 文件
NODE_ENV=development VUE_APP_TITLE=line VUE_APP_URL=https://api.apiopen.top/
-
配置 .env.development.local 环境文件
NODE_ENV=development VUE_APP_TITLE=local VUE_APP_URL=https://api.apiopen.top/ VUE_APP_PROXY=/dev
到此 开发 环境配置告一段落, 后面还会有一些剩余的开发环境配置, 接下来讲配置自定义命令
-
配置 package.json 文件(实现自定义 启动命令 和 构建命令)
在项目根目录打开 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
- 在 刚刚创建的 fetch.js 文件中添加如下代码
// 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); }); }); } }; - 在 src 目录下创建 getData.js
- 添加 如下 代码
// 引入 封装请求 import fetch from "../public/fetch.js"; /** * 作用: getData.js 用于请求的集中管理 * 假设: 你的项目 有 100 个接口,散落在项目中,很难进行管理, 我们需要把这 100个接口进行集中管理 */ /** * 获取最新 消息(其他接口也要按照这种格式写) */ export const getWangYiNews = data => fetch("getWangYiNews", data, "get");
- 到此 axios 请求封装 完成了
-
axios 封装请求的使用
- 打开 src/views/Home.vue 文件
- Home.vue 文件代码
- 启动 项目 在控制台中查看结果
- 关于 vue 项目的配置 到这里 就全部讲完了
项目地址仅供小伙伴们参考学习