使用vue-cli(2.x)开发web的基础(三)-局域网中访问,跨域等设置

1. vue-cli开发环境局域网中访问设置

最新版本生成vue在开发环境中已经不直接支持在局域网内访问网页

为了能在局域网中使用,需要在package.json里面设置

在键 "scripts"对应的里面的 "dev"后面添加 --host " 路径"

例如

2. vue-cli开发环境跨域设置

在config/index.js文件中  dev对应的 proxyTable,在里面添加键值对

'/test': {

    target: 'http://192.168.31.110:8888/api',

    changeOrigin: true,

    pathRewrite: {}

}

如果使用vue-resource方法获取路径 http://192.168.31.110:8888/api/test 的数据

this.$http.get('/test').then((data) => {

console.log(data)

}, (err) => {

console.log(err)

})

3. vue里自定义全局的js方法

在src/main.js里面定义方法

例如写个通用日期转换字符串的方法,直接放在main.js里面

Vue.filter('date', function (val, fmt) {

  if (val instanceof Date) {

    var o = {

      'M+': val.getMonth() + 1,

      'd+': val.getDate(),

      'h+': val.getHours(),

      'm+': val.getMinutes(),

      's+': val.getSeconds(),

      'q+': Math.floor((val.getMonth() + 3) / 3),

      'S': val.getMilliseconds()

    }

    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (val.getFullYear() + '').substr(4 - RegExp.$1.length))

    for (var k in o) {

      if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))

    }

    return fmt

  }

  return val

})

在组件中调用:

js方法调用:

Vue.options.filters.date(new Date(),'yyyy-MM-dd hh:mm:ss')

this.$options.filters.date(new Date(),'yyyy-MM-dd hh:mm:ss')

标签里面绑定:

v-bind:value="$options.filters.date(new Date(),'yyyy-MM-dd hh:mm:ss')“

你可能感兴趣的:(使用vue-cli(2.x)开发web的基础(三)-局域网中访问,跨域等设置)