总结

1，图片路径引用

问题：vue项目上线后一般放在子目录里面 使用常规的图片路径引用的方式在本地运行是没有问题的 但是项目上线 很多时候引用不到图片 出现404
解决办法：
搜集资料

设置1

图片.png

上面这个设置主要是针对 js css 这两种静态文件在打包后 index.html里面的引用路径前面加一个 ./

图片.png

这样在服务器上 index.html里面就能找到js 和 css 文件了

设置2

css样式里面引入 图片的话
需要设置一个打包的 配置 使得打包后的样式文件里面的图片引入得到正确的引入

图片.png
图片.png

template 中 img 标签中src

原则：相对路径

图片.png

注意： 如果是list 的下一级文件夹里面的页面 相对路径需要添加一个相对文件

template 中 img 标签中 v-bind:src

图片.png

2，开放本地vue项目给内网伙伴使用

图片.png

查看本地电脑的ip

图片.png
图片.png
图片.png

3，vue 服务器代理 + 项目开发or生产环境的配置

图片.png
图片.png

项目线上 放在子目录的设置

设置1

样式文件打包后 文件路径引入的改变设置

图片.png

设置2

vue 分页面 路由 添加子目录的设置

图片.png

4，有导航栏+登录页面的 vue结构

嵌套路由

图片.png

5，弹窗兼容ie浏览器 - 弹窗高度不可以定死

图片.png

  .filedialogWrap{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    overflow: auto;
  }
 .filedialogWrap .filedialog{
    position: relative;
    box-shadow: 1px 1px 1px 1000px rgba(0,0,0,0.5);
    margin: 0 auto 50px;
    margin-top: 15vh;
    width: 40%;
    background-color: #ffffff;
    border-radius: 4px;
 }

6，两层关系 +三个条件

这种判断 需要 从两层关系入手 再把三个条件分配到两层关系上
详情

图片.png

编辑页面：

图片.png

详情 -》编辑 页面结构的改变
两层关系： 详情、编辑
三个条件：
1，详情状态
2，编辑状态
3，有图、无图状态

步骤区分判断：
步骤一：

图片.png
图片.png

步骤二：
内部细节判断

图片.png
步骤三：
无图判断
图片.png

7，金额-保留两位小数（包括负数）

   function() {
         var reg = /^(\-|\+)?\d+(\.\d+)?$/;
         if(reg.test(num)){    // 正则判断 到是：负数、正数、整数、小数
              num = parseFloat(num);   //过度为浮点数
         }else{
              num = 0;  // 否则就设置成0
         }

         let  resultnum = num.toFixed(2);  // 浮点数 设置为 保留两位小数

         return '￥'+ resultnum;//返回 带单位的数据
   }