一同学,跳槽到一家大公司,之前没有做过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 封装请求的使用

项目地址仅供小伙伴们参考学习


  • 检查环境 与 报错处理

    检查环境

  1. 打开 cmd 依次输入 如下 命令
    # node 检测
    node -v
    
    # npm 检测
    npm -v
    
    # vue-cli 脚手架检测
    vue -V
  2.  如果一切顺利 将 看到 下面截图 效果

    报错处理

  1. node 报错: 自行处理
  2. npm 报错: 自行处理
  3. 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 
    卸载它。
  4. 版本要求
    Node 版本要求
    
    Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
    你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
  5.  安装 @vue/cli  (接下来 我 将 使用npm安装, 推荐使用npm安装)
    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
  • 使用 vue-cli 3 创建 vue 项目

当阅读到这里 默认 你现在的电脑 环境问题已解决

  1. 在 cmd 中 输入
    # 创建 vue 项目 project
    vue create project

    下面跟着 截图做 就行了 (这块会了可直接跳过)

     

     

  2. 关于使用cli3创建vue项目更详细的 教程 请看 @vue/cli 创建vue项目
  • 配置 vue.config.js 文件

  1. 确认项目结构

  2. 项目 根目录 创建 vue.config.js 文件

  3. 作用是什么

    vue.config.js 是 vue cli 3 脚手架搭建项目的 特有的, 比如:请求代理, webpack 配置, 打包输出等都会在这里配置
  4. 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: {}
};
  • 应用场景 与 环境配置文件

  1. 环境

    假设公司有 开发, 测试, 连调, 演示,生产 五个环境,关于环境我们详细划分下,
    可分为本地和线上(生产)两类,每类对应着五种环境(如下图)

场景

场景一:
假设你们公司开了一个新项目,你负责登录功能(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 中的环境变量
  1.  说明

    在文末会有我配置好的项目地址,供大家参考或使用, 为了把所有的配置文件上传到 github 上,
    我将 .gitignore 中 ".env.local " 和 ".env.*.local" 类型的忽略文件注释掉了,
    如果你要使用本项目作为开发基本配置,
    采用 svn 版本控制的需要将 带有.local的文件加入忽略列表, 
    采用git版本控制的 将图片中的 忽略类型去掉即可

     

  2. 配置 .env.development 文件

    NODE_ENV=development
    VUE_APP_TITLE=line
    VUE_APP_URL=https://api.apiopen.top/
    

  3. 配置 .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 文件, 接下来我们将自定义 命令 实现通过命令启动运行不同环境(请确保你的文件与截图一致)

  1. 配置 启动开发环境自定义命令

    在 script 脚本中添加 如下命令
    
    # 启动 本地 开发环境
    "serve-dev": "vue-cli-service serve --mode development"
    
    # 打包 线上 开发环境
    "build-dev": "vue-cli-service build --mode development"

  2. 说明

    当 我们 在终端中输入 npm run serve-dev 命令时, 会通过 --mode 传入模式(也就是环境变量),
    vue 会根据传入的模式读取对应的环境文件, 我们这里传入的模式为 development, 
    当执行 npm run serve-dev 命令时就会读取 .env.elopment.local 中的环境变量,
    这个操作会在 vue 编译前就注入到项目中, 
    我们可以通过 node 暴露的 全局变量 process.env.NODE_ENV 拿到当前环境变量, 
  3. 启动项目

    # 打开终端 键入 我们在 package.json 中配置的 开发环境启动命令
    npm run serve-dev

     下图 红框处就是我们传入的 模式 , 蓝色 info 启动 开发 服务

  4. 查看当前环境变量 

到此 环境配置结束 

  • 请求封装

    # 下面的封装请求 会 用到 axios 和 qs 这两个工具, 在封装请求前先手动安装他们
    # axios 作用: 跟 ajax 就是发送请求的一个工具
    # qs 作用: 当我们发送 post 请求时,有可能对携带的参数进行序列化(qs 就是干这个的)
    
    npm install axios --save
    
    npm install qs --save
    
  1. 在 public 目录下创建 fetch.js

  2. 在 刚刚创建的 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);
            });
        });
      }
    };
    
  3. 在 src 目录下创建 getData.js

  4. 添加 如下 代码
    // 引入 封装请求
    import fetch from "../public/fetch.js";
    /**
     * 作用: getData.js 用于请求的集中管理
     * 假设: 你的项目 有 100 个接口,散落在项目中,很难进行管理, 我们需要把这 100个接口进行集中管理
     */
    
    /**
     * 获取最新 消息(其他接口也要按照这种格式写)
     */
    export const getWangYiNews = data => fetch("getWangYiNews", data, "get");
    

  1. 到此 axios 请求封装 完成了
  • axios 封装请求的使用

  1. 打开 src/views/Home.vue 文件
  2. 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>
    
  3. 启动 项目 在控制台中查看结果

  4. 关于 vue 项目的配置 到这里 就全部讲完了

项目地址后期贴上

 

Logo

前往低代码交流专区

更多推荐