博客 (118)

错误 BLAZOR102     The scoped css file was defined but no associated razor component or view was found for it.

错误 BLAZOR106 The JS module file was defined but no associated razor component or view was found for it.

解决方法:将相关文件从项目中排除,再包括到项目中即可正常生成。

若仍报错,备份这些文件,删除并新建文件,复制代码进去尝试生成。

若仍报错,通过注释代码的方式排查问题原因。

xoyozo 3 年前
2,886

bundleconfig.json 有格式错误

xoyozo 3 年前
1,868

如果在发布的时候遇到以下错误:

资产文件“\obj\project.assets.json”没有“net6.0”的目标。确保已运行还原,且“net6.0”已包含在项目的 TargetFrameworks 中。

在发布设置中更改正确的目标框架版本即可。

xoyozo 3 年前
4,459

LigerShark.WebOptimizer.CoreBuildBundlerMinifier
特点

在运行时捆绑和缩小 CSS 和 JavaScript 文件

具有完整的服务器端和客户端缓存,以确保高性能

可禁用缩小

支持使用通配模式

标记帮助程序与缓存破坏

支持内联

支持 SCSS

将 CSS、JavaScript 或 HTML 文件捆绑到单个输出文件中

保存源文件会自动触发重新捆绑

支持通配模式

支持 CI 方案的 MSBuild 支持

缩小单个或捆绑的 CSS、JavaScript 和 HTML 文件

每种语言的缩小选项是可定制的

打开生成的文件时显示水印

任务运行程序资源管理器集成

命令行支持

快捷更新解决方案中所有捆绑包

禁止生成输出文件

转换为 Gulp

注入(Program.cs)

services.AddWebOptimizer();

app.UseWebOptimizer();


指定捆绑的项目在运行时自动缩小 css 和 js,也可以在 AddWebOptimizer 中自定义。默认情况下,生成的文件不会保存到磁盘,而是保存在缓存中。手动编辑 bundleconfig.json 文件来指定需要合并和缩小的文件
功能配置
{
  "webOptimizer": {
    // 确定是否应设置 HTTP 标头以及是否应支持条件 GET (304) 请求。在开发模式下禁用此功能可能会有所帮助。cache-control
    "enableCaching": true,
    // 确定是否用于缓存。在开发模式下禁用可能会有所帮助。IMemoryCache
    "enableMemoryCache": true,
    // 确定管道资产是否缓存到磁盘。这可以通过从磁盘加载 pipline 资产而不是重新执行管道来加快应用程序重新启动的速度。在开发模式下禁用可能会有所帮助。
    "enableDiskCache": true,
    // 设置资产将存储的目录 ifistrue。必须为读/写。enableDiskCache
    "cacheDirectory": "/var/temp/weboptimizercache",
    // 确定元素是否应指向捆绑路径或应为每个源文件创建引用。这在开发模式下禁用很有帮助。
    "enableTagHelperBundling": true,
    // 是一个绝对 URL,如果存在,它会自动为页面上的任何脚本、样式表或媒体文件添加前缀。注册标记帮助程序后,标记帮助程序会自动添加前缀。在此处查看如何注册标记帮助程序。
    "cdnUrl": "https://my-cdn.com/",
    // 确定捆绑包的源文件中没有内容时的行为,默认情况下,请求捆绑包时将引发 404 异常,设置为 true 以获取包含空内容的捆绑包。
    "allowEmptyBundle": false
  }
}


在 bundleconfig.json 捆绑时设置

[
  {
    "outputFileName": "output/bundle.css",
    "inputFiles": [
      "css/lib/**/*.css", // globbing patterns are supported
      "css/input/site.css"
    ],
    "minify": {
        "enabled": true,
        "commentMode": "all"
    }
  },
  {
    "outputFileName": "output/all.js",
    "inputFiles": [
      "js/*.js",
      "!js/ignore.js" // start with a ! to exclude files
    ]
  },
  {
    "outputFileName": "output/app.js",
    "inputFiles": [
      "input/main.js",
      "input/core/*.js" // all .js files in input/core/
    ]
  }
]


热重载(在开发模式中保存文件自动更新浏览器效果)
VS 安装扩展,方法:菜单 - 扩展 - 管理扩展 - 联机 搜索“Bundler & Minifier
其它资料
ASP.NET 官方文档


xoyozo 3 年前
3,736

原生判断

window.addEventListener('scroll', scroll)

function scroll() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      
      if (scrollTop === 0) {
        console.log('滚动到顶了');
      }
      if (scrollTop + clientHeight >= scrollHeight - 100) {
        console.log('滚动到底了');
      }
}

window.removeEventListener('scroll', scroll) // 移除滚动事件

scrollTop:文档在可视区上沿的位置距离文档顶部的距离

clientHeight:可视区的高度

scrollHeight:文档总高度

100:用于在滚动到底部之前提前加载内容(如瀑布流),提高用户体验,请自行修改数值(建议不小于 2 像素,以规避在部分浏览器上因获得值为小数时可能无法触发的问题)


jQuery 判断

window.addEventListener('scroll', scroll)

function scroll() {
    const doc_height = $(document).height();
    const scroll_top = $(document).scrollTop();
    const window_height = $(window).height();
    
    if (scroll_top === 0) {
      console.log('滚动到顶了');
    } else if (scroll_top + window_height >= doc_height - 100) {
      console.log('滚动到底了');
    }
}


xoyozo 3 年前
2,695

User-Agent 字符串不会进行更新以区分 Windows 11 和 Windows 10。

但我们可以使用 JS 进行客户端判断是否为 Windows 11:

navigator.userAgentData.getHighEntropyValues(["platformVersion"])
 .then(ua => {
   if (navigator.userAgentData.platform === "Windows") {
     const majorPlatformVersion = parseInt(ua.platformVersion.split('.')[0]);
     if (majorPlatformVersion >= 13) {
       console.log("Windows 11 or later");
      }
      else if (majorPlatformVersion > 0) {
        console.log("Windows 10");
      }
      else {
        console.log("Before Windows 10");
      }
   }
   else {
     console.log("Not running on Windows");
   }
 });

支持客户端提示 User-Agent 浏览器:

浏览器通过客户端提示 User-Agent 区别?
Microsoft Edge 94 及以上
Chrome 95 及以上
Opera
Firefox
Internet Explorer 11


M
转自 MSEdgeTeam 3 年前
3,097

使用 v-pre 指令:

<span v-pre>{{ this will not be compiled }}</span>

参:https://cn.vuejs.org/api/built-in-directives.html#v-pre

xoyozo 3 年前
6,349

错误 TS5055 无法写入文件“***.js”,因为它会覆盖输入文件。

添加 tsconfig.json 文件有助于组织包含 TypeScript 和 JavaScript 文件的项目。有关详细信息,请访问 https://aka.ms/tsconfig。

检查“输出”窗口,找到“error”的行,并修复该错误。

一种可能的情况是,使用了 vue3 的 computed 计算属性。原因未知,尝试又定义了一个变量并使用 watch 侦听原变量来给它赋值,同样报错。

xoyozo 3 年前
5,488

本文以 vue 3 为例,vue 2 同理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>clipboard.js 在 vue.js 中使用</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in list">
                {{item}}
                <button class="btn-cp" :value="item">复制</button>
            </li>
        </ul>
    </div>
    <script src="//xxx/vue/core-3.x.x/vue.global.js"></script>
    <script src="//xxx/clipboard/clipboard.js-2.x.x/dist/clipboard.min.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    list: ["aaa", "bbb", "ccc"]
                }
            },
            mounted: function () {
                var clipboard = new ClipboardJS('.btn-cp', {
                    text: function (trigger) {
                        return trigger.getAttribute('value');
                    }
                });
                clipboard.on('success', function (e) {
                    alert('已复制“' + e.text + '”到粘贴板');
                    e.clearSelection();
                });
            }
        });
        const vm = app.mount('#app');
    </script>
</body>
</html>


xoyozo 3 年前
2,359

第一步,创建用户和 AccessKey

登录阿里云控制台后,从头像处进入 AccessKey 管理

image.png

“开始使用子用户 AccessKey”

image.png

点击“创建用户”,填写用户名(本文以 oss-bbs 为例),并勾选“Open API 调用访问”

image.png

点击确定创建成功,可以看到 AccessKey ID 和 AccessKey Secret


第二步,创建权限策略

在阿里云控制台左侧菜单“RAM 访问控制”中展开“权限管理”,选择“权限策略”

image.png

点击“创建权限策略”,切换到“脚本编辑”

image.png

输入以下策略文档(JSON 格式)

{
    "Version": "1",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                    "oss:ListBuckets",
                    "oss:GetBucketStat",
                    "oss:GetBucketInfo",
                    "oss:GetBucketAcl" 
                      ],    
            "Resource": "acs:oss:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": [
                    "oss:Get*",
                    "oss:Put*",
                    "oss:List*",
                    "oss:DeleteObject"
                    ],
            "Resource": "acs:oss:*:*:bbs"
        },
        {
            "Effect": "Allow",
            "Action": [
                    "oss:Get*",
                    "oss:Put*",
                    "oss:List*",
                    "oss:DeleteObject"
            ],
            "Resource": "acs:oss:*:*:bbs/*"
        }
    ]
}

脚本中第一段表示允许用户登录,第二段表示允许操作 Bucket,第三段表示允许操作 Bucket 内的文件对象。

示例中的 bbs 是 Bucket Name,请修改为自己的 Bucket 名称。

点击下一步,填写名称,确定即可。


第三步,添加用户权限

转到“用户”页面,在刚才创建的用户行“添加权限”

image.png

切换到“自定义策略”,将上一步创建的权限策略添加到右侧“已选择”区

image.png

确定。


相关信息:

You have no right to access this object because of bucket acl.

xoyozo 3 年前
4,765