vue项目记录

最新推荐文章于 2022-03-29 21:56:41 发布

在bat捡垃圾

最新推荐文章于 2022-03-29 21:56:41 发布

阅读量211

点赞数

CC 4.0 BY-SA版权

分类专栏：学习知识点 get 记录文章标签： vue 项目线上

本文链接：https://blog.youkuaiyun.com/qq_33144001/article/details/90699813

学习同时被 3 个专栏收录

47 篇文章

订阅专栏

知识点

45 篇文章

订阅专栏

get

44 篇文章

订阅专栏

vue --version 2.9.6

  params: {
        time: Math.round(new Date().getTime() / 1000),
        sign: this.sign({
          time: Math.round(new Date().getTime() / 1000),
          token: ''
        }),
        token: ''
      },

import qs from "qs";
//axios api请求
 this.$http.post(
          window.location.protocol + "//" + window.location.host +
            "/hongbao/fnuoos_dgapp/?mod=appapi&act=red_packet&ctrl=receive&store_id=11",
          qs.stringify(
            this.params
          )
        ).then（）


 proxyTable: {
      "/hongbao": {
        target: "http://192.168.0.249",
        logLevel: 'debug',
        changeOrigin: true,
        pathRewrite:{
          "/hongbao":''
        }
      },
}

 token: function() {
      if (document.cookie.indexOf("lighteshop_appkey") == -1) {
        this.params["token"] = "";
        return this.params["token"]
      } else {
        this.params["token"] = this.$cookies.get("lighteshop_appkey");
       return this.params["token"]
      }
    }

md5加密    sign签名
import md5 from "js-md5";
sign: function(obj) {
      //排序的函数
      var newkey = Object.keys(obj).sort();
       //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
      var newObj = {}; //创建一个新的对象，用于存放排好序的键值对
      for (var i = 0; i < newkey.length; i++) {
        //遍历newkey数组
        newObj[newkey[i]] = obj[newkey[i]]; //向新创建的对象中按照排好的顺序依次增加键值对
      }
      let str = "";
      for (let key in newObj) {
        str += key;
        str += obj[key];
      }
      let sign = md5(`123${str}123`);
      return sign; //返回排好序的新对象
    },

url：window.location.protocol + "//" + window.location.host //服务器接口地址

vue做移动端适配最佳解决方案

最近在做商城的项目，发现有赞的ui非常适合，但有一个问题是有赞的ui用的单位是px，做不了移动端的适配，官网的提供的vw适配方案发现不可行，最后还是决定rem来做适配，上网搜了一下，发现了一套可用方案，亲测有效哦

它的原理是借助px2rem 插件方便的将px单位转为了rem

具体步骤：

安装

npm install px2rem-loader  lib-flexible --save

在main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

在build下的 utils.js中，找到generateLoaders 方法，添加以下代码

const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

重启项目，会发现自己设置的px被转为rem 了
但是有一定的局限性
以上实现转换适用于：

（1）组件中编写的<style></style>下的css

（2）从index.js或者main.js中import ‘../../static/css/reset.css’引入css

（3）在组件的<script type=”text/ecmascript-6″> import ‘../../static/css/reset.css'</script>中引入css

另外的情况不适用：

（1）组件<style></style>中@import “../../static/css/reset.css (可考虑上面（2）、（3）的形式引入)

（2）外部样式:<link rel=”stylesheet” href=”static/css/reset.css”>

（3）元素内部样式：style=”height: 417px; width: 550px;”
另外我要补充的是：在做移动端适配的时候我们不建议给字体也设置rem的单位，针对这种情况，我为字体适配的解决方案是使用媒体查询，文件以组件<style></style>中@import “../../static/css/reset.css形式引入，可完美解决移动端适配问题

import qs from "qs"; 
this.$http
        .get(
          //   `
          // /hongbao/fnuoos_dgapp/?mod=appapi&act=red_packet&ctrl=receive&store_id=11
          // `
          window.location.protocol + "//" + window.location.host +
            "/hongbao/fnuoos_dgapp/?mod=appapi&act=red_packet&ctrl=receive&store_id=11",
          qs.stringify(
            this.params
          )
        )
        .then(function(res) {
            that.hongbaoList = ''
            that.lingquList = ''
            that.TopImg = res.data.data.top_img;
            that.BtnImg = res.data.data.bottom_img;
             document.getElementById("lingqu").innerHTML = " ";
             document.getElementById("c-top").innerHTML = " ";
             document.getElementById("end").innerHTML = " ";
              document.getElementById("lingqu").style.height= "220px";
             document.getElementById("end").style.height= "200px";
             that.lingqu = "#FD2D43";
             
        })

项目上线请求地址拼接（https+//+域名+参数）：

  let url = window.location.protocol + "//" + window.location.host +
                  "?mod=appapi&act=dg_login&ctrl=getcode";
例子：https://mp.youkuaiyun.com?mod=appapi&act=dg_login&ctrl=getcode

获取url参数：

  getQueryString:function(name){
     let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i");
        if(reg.test(window.location.href)){
            return unescape(RegExp.$2.replace(/\+/g," "))
        }
        return "all";
},

vue打包后（npm run build）的注意事项：

1、css的图片地址： ./../assets/box.png

2、js的图片地址： ./static/header.png

在用npm run build 打包的时候，正常img标签中的src图片路径和css中的图片路径是可以正常识别的，
但是在打包js获取的图片路径时，打包后无法找到图片，原因是
js动态生成的路径无法被url-loader解析到，如果你去build，会发现图片甚至不会打包输出到dist目录（webpack是按需打包的）。
如果你是vue-cli初始化的项目，解决的办法：
第一步，把图片放到src同级的static目录（build/build.js文件中有一段代码是把static目录拷贝到dist/static的），比如图片放在static/img/a.png
第二步，js中使用./static/img/a.png去引用就行了。