Vue2-elm项目学习——config

config目录

env.js

便于编译环境间的切换

/**
 * 配置编译环境和线上环境之间的切换
 * 
 * baseUrl: 域名地址
 * routerMode: 路由模式
 * imgBaseUrl: 图片所在域名地址
 * 
 */

let baseUrl = ''; 
let routerMode = 'hash';
let imgBaseUrl = '';


if (process.env.NODE_ENV == 'development') {
    imgBaseUrl = '/img/';

}else if(process.env.NODE_ENV == 'production'){
	baseUrl = '//elm.cangdu.org';
    imgBaseUrl = '//elm.cangdu.org/img/';
}

export {
	baseUrl,
	routerMode,
	imgBaseUrl,
}

• process对象是全局变量，它提供当前node.js的有关信息，以及控制当前node.js的有关进程。它对于node应用程序是始终可用的，无需require()。
• env是它的一个属性，这个属性返回包含用户环境信息的对象。在终端输入node后，在输入process.env可以看到打印出来的信息。
• NODE_ENV不是process.env对象上原有的属性，它是我们自己添加上去的一个环境变量，用来确定当前所处的开发阶段。一般生产阶段设为production，开发阶段设为develop，然后在脚本中读取process.env.NODE_ENV。

在package.json中，dev 和 local分别对应两个不同环境。

  "scripts": {
    "dev": "cross-env NODE_ENV=online node build/dev-server.js",
    "local": "cross-env NODE_ENV=local node build/dev-server.js",
    "build": "node build/build.js"
  },

不同电脑上设置可能不同，可以使用cross-env来解决问题。
cross-env可以跨平台的设置和使用环境变量

cross-env NODE_ENV=production node build.js

mUtils.js

//localStorage
/**
 * 存储localStorage
 */
export const setStore = (name, content) => {
  if(!name) return;
  if(typeof content !== 'string'){
    content = JSON.stringify(content);
  }
  window.localStorage.setItem(name, content);
}
/**
 * 获取localStorage
 */
export const getStore = name => {
  if(!name) return;
  return window.localStorage.getItem(name);
}
/**
 *删除localStorage
 */
export const removeStore = name => {
  if(!name) return;
  window.localStorage.removeItem(name);
}

rem.js

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);