工作遇上的问题汇总1 SharePoint开发 2022.2.9

只想要周末双休
269 阅读2分钟

这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」 最近莫名其妙就被安排个活,每天都有人检查,真累啊,钱真的不好挣.

工作遇到的问题汇总 SharePoint

  • git 提交到到repos里面的代码,来取下来怎么运行?

因为git上传是设置了忽略代码,将一些安装的包,忽略,没有上传.所以需要clone下来的代码,运行一下安装包的命令. npm install ,注意安装的位置,要选到项目中可以解决问题

  • 经过上一步的命令,使用gulp serve 命令报错,sass有问题怎么解决?如图所示

MicrosoftTeams-image (1).png

使用如下命令: npm rebuild node-sass 即可解决

  • 当运行gulp serve时 在网页调试是发现不了本地的webpart组件,怎么解决?

这应该是新创建的组件,或者是对于网站而言是新组件webpart,需要添加证书. gulp trust-dev-cert 可以解决问题

  • webpart 打包出现问题怎么解决

如何生成web-part 已经在上一篇文章说明了，如果需要请参见 juejin.cn/post/700618… 这篇文章生成web-part，找到SharePoint的生成目录 ，打开命令行 输入

npm install

然后依次在命令行或PowerShell上输入

gulp build --ship  
gulp bundle --ship  
gulp package-solution --ship 

问题1.'gulp' is not recognized

问题描述： " 'gulp' is not recognized as an internal or external command, operable program or batch file."

解决方法输入以下命令:

 //  (Install gulp globally)
npm install gulp -g        

问题2.The build failed because a task wrote output to stderr

需要修改配置文件 tslint.json 在项目的根路径下就可以找到

image.png

问题3.域对象不可用 修改设置config\package-solution.json

{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
 "name": "demo-test-client-side-solution",
 "id": "4a05323b-ccc4-4ecf-b1ab-606cf1e737ac",
 "version": "1.0.0.0",
     //默认
 "includeClientSideAssets": true,
     //解决tenant不能部署的问题 比如 上传成功且添加成功但是添加app找不到的问题
 "skipFeatureDeployment": true,
     //解决域的问题
 "isDomainIsolated": false,
 "developer": {
   "name": "",
   "websiteUrl": "",
   "privacyUrl": "",
   "termsOfUseUrl": "",
   "mpnId": ""
 }
},
"paths": {
 "zippedPackage": "solution/demo-test.sppkg"
}
}

  • react打印功能实现

github解决方案 react to print,真的好用,

import React from 'react';
import ReactToPrint from 'react-to-print';

import { ComponentToPrint } from './ComponentToPrint';

class Example extends React.PureComponent {
  render() {
    return (
      <div>
        <ReactToPrint
          trigger={() => {
            // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
            // to the root node of the returned component as it will be overwritten.
            return <a href="#">Print this out!</a>;
          }}
          content={() => this.componentRef}
        />
        //这个位置写你想要的组件名
        <ComponentToPrint ref={el => (this.componentRef = el)} />
      </div>
    );
  }
}

想要打印功能,但不想要显示的解决方案.在外面写个div 然后display设置none

<div style={{ display: "none" }}><ComponentToPrint ref={componentRef} /></div>

没写完明天继续,慢慢来别着急

avatar
文章
阅读
粉丝