本系列文章纯粹是解决问题,本人很菜很忙,不想谈的太深入太细,记得是支付宝的大佬多隆大概说过,
写代码有两种需求第一种是改变世界,第二种是解决问题,因为很有自知之明,所以暂时归类自身于第二种。
解决个这么低级的问题还能扯到这种大佬的话,有点羞耻。主要是想让小白解决问题。

主要解决的问题

平台很多地方都包含了平台名称如”xxx管理平台”,于是在main.js中写了Vue.prototype.$platform="``xxx管理平台``",然后在全局this引用一份就行了。局限有,首先在这定义的变量用在template.html等模板上不方便,第二,想要在生产时候直接通过参数影响代码,写死在这满足不了响应参数的需求。

  1. 如何接受参数,不影响其他命令,此处应该有很多方法,我采取的方法是: 启动时npm run dev --plateform=xxx并且在script里面不用写任何东西接收,否则会被认为是cli如webpack-dev-server的命令参数而报错。
  1. "scripts": {
  2. "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  3. "start": "npm run dev",
  4. "lint": "eslint --ext .js,.vue src",
  5. "build": "node build/build.js"
  6. }
  1. 初步接收该参数是在webpack.base.js或者config等v8环境下运行时js文件内,用process.env.npm_config_plateform接收(—plateform=xxx参数对应生成该npm_config_plateform变量xxx)。


  1. 此时是在v8的nodejs环境下,如何将它影响到浏览器下的运行文件呢?在webpack.base.conf.js中调用new webpack.DefinePlugin。

    重要:JSON.stringify(process.env.npm_config_plateform)很关键,不这样用的话,后面取出的 process.env.Plateform是变量abcd而不是字符串”abcd”,就会导致在后面引用时候是个变量报错。

    1. plugins: [
    2. new webpack.DefinePlugin({
    3. //process.env.npm_config_plateform是node环境下的参数,前面的'process.env.Plateform'是
    4. //在浏览器环境下全局作用域中的变量,该步骤作用就是把node环境的参数挂载在浏览器环境(js全局作用域)下
    5. 'process.env.Plateform': JSON.stringify(process.env.npm_config_plateform)
    6. })]
  2. 利用运行环境下的变量process.env.Plateform改写模板html文件的title。plugins调用 new HtmlWebpackPlugin

    (开发和生产有各自模板情况下,webpack.prod.conf.js和webpack.dev.conf.js都要调用)。
    提前把默认的title字符串(config.global.title)写在config的index.js下,webpack结合二者作为备选项生成最终的title。然后在HtmlWebpackPlugin中使用。

  1. //process.env.npm_config_plateform命令行参数不传就是undefined,此时
  2. //config.global.title就是默认值。
  3. const title = process.env.npm_config_plateform||config.global.title;
  4. new HtmlWebpackPlugin({
  5. title:title,
  6. filename: 'index.html',
  7. template: 'index.html',
  8. inject: true
  9. })

此时Vue.prototype.$platform=process.env.Plateform即可使用。
ps:看了阮老师的npm script文章http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html里的
九、变量一章,还是把默认的title放在package.json里面比较好,即提前写好”plateform”:”xxx管理平台”
然后由此产生的process.env.npm_package_plateform和process.env.npm_config_plateform共同决定。

npm script —var=的形式如果传入false 打印出来的永远是空字符串””