VUE项目多环境配置.md

Posted 2020-11-21 vipinchan

目录

• 一、了解webpack.DefinePlugin
• 二、项目中如何配置多环境

web项目开发，通常需要有开发环境、测试环境和生产环境，用于配置不同的环境变更，如调用本地接口、测试接口和生产接口，VUE项目是前后端完全分离的框架，像是web界的C/S构架，在做VUE前端开发时，就需要用开发环境甚至于mock环境，等项目上线时，则需要使用生产的环境变量进行打包部署。

一、了解webpack.DefinePlugin

webpack是静态模块打包器，可以将vue项目中所有文件打包成一个或多个jsbundle，其中webpack.DefinePlugin在项目编译时可定义全局常量，应用在项目任何地方。

new webpack.DefinePlugin({
  // Definitions...
})

用法：

每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。

• 如果这个值是一个字符串，它会被当作一个代码片段来使用。
  - 如果这个值不是字符串，它会被转化为字符串(包括函数)。
  - 如果这个值是一个对象，它所有的 key 会被同样的方式定义。
  - 如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。

这些值会被内联进那些允许传一个代码压缩参数的代码中，从而减少冗余的条件判断。

// webpack.js
new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_html5: true,
  TWO: "1+1",
  "typeof window": JSON.stringify("object")
})

// index.js
if (!PRODUCTION) {
  console.log(‘Debug info‘)
}

if (PRODUCTION) {
  console.log(‘Production log‘)
}

注意，因为这个插件直接执行文本替换，给定的值必须包含字符串本身内的实际引号。通常，有两种方式来达到这个效果，使用 ‘"production"‘, 或者使用 JSON.stringify(‘production‘)。

官方文档：https://www.webpackjs.com/plugins/define-plugin/

二、项目中如何配置多环境

1. 定义webpack多环境配置文件

通过修改根目录的npm配置文件package.json，通过--config设置webpack执行脚本
了解了webpack.DefinePlugin，回到我们的项目中来，项目使用官方vue-cli进行初始化框架，可以看到初始化的项目中会有build和config两个文件夹，详细文件如下：

其中webpack.dev.conf.js和webpack.prod.conf.js对应的是webpack不同环境下的打包配置，dev是开发环境，开启了调试功能，而prod是生产环境，可使用各种插件进行项目优化，比如代码压缩；
打开webpack.dev.conf.js可以找到下面这段代码：

    // 定义全局变量process.env
    new webpack.DefinePlugin({
      ‘process.env‘: require(‘../config/dev.env‘)
    }),

    // dev.env.js
    ‘use strict‘
    const merge = require(‘webpack-merge‘)
    const prodEnv = require(‘./prod.env‘)
    module.exports = merge(prodEnv, {
      NODE_ENV: ‘"development"‘,
      BASE_URL: ‘"http://localhost:9000/api"‘,
    })

    // 项目中使用如index.js
    console.log(process.env.NODE_ENV); // 输出development
    console.log(process.env.BASE_URL); // 输出http://localhost:9000/api

为此，我们如有需要增加其它环境配置，只需copy一份webpack.dev.conf.js，如改名为webpack.local.conf.js，按上面的介绍修改对应的全局变量即可。

2. 修改配置文件package.json

{
    "name": "vux-demo",
    "version": "1.0.0",
    "description": "A Vue.js project",
    "author": "vipinchan <[email protected]>",
    "private": true,
    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "local": "webpack-dev-server --inline --progress --config build/webpack.local.conf.js",
        "build": "node build/build.js"
    },
    "dependencies": {
        "axios": "^0.16.2",
        "fastclick": "^1.0.6",
        "jsonp": "^0.2.1",
        "superagent": "^3.5.2",
        "superagent-jsonp": "^0.1.1",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1",
        "vue-scroll-behavior": "^0.1.6",
        "vuex": "^2.1.1",
        "vuex-i18n": "^1.3.1",
        "vux": "^2.2.0",
        "mockjs": "1.0.1-beta3"
    },
    "devDependencies": {
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        "babel-eslint": "^7.1.1",
        "babel-loader": "^7.1.1",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "chalk": "^2.0.1",
        "compression-webpack-plugin": "^0.3.2",
        "connect-history-api-fallback": "^1.3.0",
        "copy-webpack-plugin": "^4.0.1",
        "css-loader": "^0.28.0",
        "eslint": "^3.19.0",
        "eslint-friendly-formatter": "^3.0.0",
        "eslint-loader": "^1.7.1",
        "eslint-plugin-html": "^3.0.0",
        "eslint-config-standard": "^10.2.1",
        "eslint-plugin-promise": "^3.4.0",
        "eslint-plugin-standard": "^3.0.1",
        "eslint-plugin-import": "^2.7.0",
        "eslint-plugin-node": "^5.2.0",
        "eventsource-polyfill": "^0.9.6",
        "extract-text-webpack-plugin": "^3.0.0",
        "file-loader": "^1.1.4",
        "friendly-errors-webpack-plugin": "^1.6.1",
        "html-webpack-plugin": "^2.30.1",
        "webpack-bundle-analyzer": "^2.9.0",
        "node-notifier": "^5.1.2",
        "postcss-import": "^11.0.0",
        "postcss-loader": "^2.0.8",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "optimize-css-assets-webpack-plugin": "^3.2.0",
        "ora": "^1.2.0",
        "rimraf": "^2.6.0",
        "url-loader": "^0.5.8",
        "yaml-loader": "^0.4.0",
        "less": "^2.7.1",
        "less-loader": "^2.2.3",
        "postcss": "^5.2.10",
        "postcss-less": "^0.15.0",
        "vux-loader": "^1.0.56",
        "vue-loader": "^13.3.0",
        "webpack-dev-middleware": "^1.10.0",
        "webpack-hot-middleware": "^2.16.1",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "portfinder": "^1.0.13",
        "webpack": "^3.6.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.0",
        "object-assign": "^4.1.0"
    },
    "engines": {
        "node": ">= 4.0.0",
        "npm": ">= 3.0.0"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
    ]
}

package.json是npm的配置文件，其中定义了项目基本信息、项目依赖库以及最重要的node运行脚本，可通过webpack --config指令指定加载配置文件，运行脚本定义区看第七行代码：

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "local": "webpack-dev-server --inline --progress --config build/webpack.local.conf.js",
    "build": "node build/build.js"
  },

npm run dev运行webpack-dev-server，并指定配置文件webpack.dev.conf.js。
npm run local运行webpack-dev-server，并指定配置文件webpack.local.conf.js。
npm run build使用node执行build/build.js。

如此便可灵活实现项目的多环境配置，一键切换开发环境、测试环境和生产环境，方便本地开发调试、部署。

3. 学习webpack-dev-server常用命令

webpack-dev-server是一个小型的Node.js Express服务器，它使用webpack-dev-middleware来服务于webpack的包，除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时。

--watch 监听文件的变化
--content-base build/  默认会以当前目录为基本目录,除非你制定它
--quiet 控制台中不输出打包的信息
--progress 显示打包的进度
--hot 模块热替换，在前端代码变动的时候无需整个刷新页面，只把变化的部分替换掉
--inline  inline模式
--port 3000 指定端口
--host  指定host，默认为losthost，当然指定此项大多数情况下是为了这个服务可以被外部服务访问，这种情况之下，你最好应该确保你的服务运行在DNS解析的域名IP一致
--compress 对所有服务启用gzip压缩
--config configs/webpack.vipinchan.conf.js 加载指定配置文件

官方文档：https://webpack.js.org/configuration/dev-server