vue3项目(项目搭建, 环境配置, vue.config.js, pakeage.json配置, 请求封装)

一同学,跳槽到一家大公司,之前没有做过vue项目, 初次把玩vue,有点扎手,昨天(2019年7月12)晚上给我打电话求援,看了下他的项目,代码写的很精妙,隐隐的觉得他的项目在裸奔,因为没有任何的配置, 联想到有许多小伙伴也是只会用vue,一旦涉及到环境配置就蒙圈,于是就有了这篇文章.这篇文章对于使用 @vue/cli 3创建vue项目, vue.config.js配置,vue项目环境配置,p..

Gleason.

4151人浏览 · 2019-07-13 19:31:30

Gleason. · 2019-07-13 19:31:30 发布

一同学,跳槽到一家大公司,之前没有做过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 文件

配置开发环境 (测试环境自己配置, 文末有我配置好的项目可参考)

说明

配置 .env.development 文件

配置 .env.development.local 环境文件

配置 package.json 文件(实现自定义启动命令和构建命令)

检查环境与报错处理

检查环境

打开 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-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版本控制的 将图片中的 忽略类型去掉即可

配置 .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 文件代码

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
// 引入 接口
// 这里 使用 es6 解构方式, 一定要注意, 实际编码的时候 总是忘记 这里需要解构
import { getWangYiNews } from "@/getData.js";
export default {
  name: "home",
  components: {
    HelloWorld
  },
  created() {
    this.getDataHandle();
  },
  methods: {
    // 异步等待 执行结果就ok了
    async getDataHandle() {
      const res = await getWangYiNews();
      // 这里输出的就是 响应数据了, 下面有截图
      console.log(res);
    }
  }
};
</script>

启动项目在控制台中查看结果
关于 vue 项目的配置到这里就全部讲完了

项目地址后期贴上

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^