常见问题 ​

跨域无法预览 ​

跨域需要后端配合解决，设置允许资源文件跨域访问。

跨域设置是否成功，可以看返回的响应头里面，是否有access-control-allow-origin字段

解决跨域有以下几种方式：

• 修改nginx或者apache配置

只需要在server或者静态文件对应的location中添加 add_header Access-Control-Allow-Origin *;

server {
    add_header Access-Control-Allow-Origin *;
 }

这种方式最简单，但是接口也跟着允许跨域了，如果你的文件只是在某个目录下，可以只针对具体配置设置允许跨域。

server {
    location /upload/ {
        add_header Access-Control-Allow-Origin *;
        root /opt/homebrew/etc/nginx;
    }
 }

这样配置只针对 /upload开头的请求生效。

• 在后端静态服务中设置允许跨域

在php加载的文件头部加入以下代码

header('Access-Control-Allow-Origin:*'); // *代表允许任何网址请求

node服务，以koa为例，可以使用koa-cors中间件

const serve = require('koa-static');
const Koa = require('koa');
const app = new Koa();

var cors = require('koa-cors');
app.use(cors({
    origin: '*'
}));

app.use(serve('.', {
}));


app.listen(3000);

各种语言都类似，可以自行百度查询

文件预览不出来 ​

• 检查文件是否返回成功，是否存在跨域
• 目前不支持doc、xls格式文件的预览
• 可以看看@error事件，抛出了什么错误信息

**.defineComponent is not a function ​

出现这个问题一般是通过CDN的方式加载了vue.js文件，且CDN中的vue版本和开发环境安装的vue版本不一致。

• 问题确认

检查CDN中vue.js的版本 和 node_modules下的vue版本是否一致。

首先在项目的html中查看引入的vue.js文件路径，然后根据路径找的这个vue.js文件，查看其版本；

然后查看node_modules中安装的vue版本，注意：是在node_modules目录下找到vue安装文件，然后查看其版本，而不是package.json中的vue版本。

看看两个地方的vue版本是不是不一致，不一致往下看。

• 出现原因

package.json中vue版本不是指定的固定版本，而是在版本前面带"^"或"~"符号，这里的含义是使用符合条件的新版本，而不是看到的这个版本。

{
  "vue": "^2.6.10"
}

• 解决方法

修改package.json中 vue 和 vue-template-compiler的版本，将版本前面的"^"或"~"符号去掉，具体版本号和CDN中的vue版本保持一致。

{
  "vue": "2.6.10",
  "vue-template-compiler": "2.6.10"
}

删除 package-lock.json 文件 和 node_modules中的全部包。

重新安装所有依赖，然后运行查看效果。