飞桨AI Studio星河社区 使用Notebook部署Vue项目（若依）

官方教程只有React项目，在这里分享一下如何在飞桨平台使用Notebook部署Vue项目

部署流程

新建项目

飞桨星河社区网址：飞桨AI Studio星河社区-人工智能学习与实训社区

官方教学：AI Studio-帮助文档 (baidu.com)

点击链接进入首页，左侧栏点击项目

点击创建项目，选择第一项 Notebook

填写项目名称，IDE默认选择JupyterLab即可，之后点击创建

启动环境

进入我们新创建的项目后，左侧显示了一些基本的环境信息，点击右侧启动环境后稍作等待

项目导入

进入后，再双击进入work目录，点击上方第三个按钮即可上传文件

值得注意的是，平台不支持直接上传文件夹或者直接导入目录，最方便的方法就是将项目本地打成压缩包后直接上传压缩包，上传成功后解压缩即可

配置文件

以若依的Vue项目为例，目录中有一个bable.config.js文件，打开后在其中添加如下代码

exports.build = {
    appTitle: 'Vue', // TODO: 修改系统名称
    finalize: webpackConfig => {
       webpackConfig.output.publicPath = 'https://"此网页url"/api_serving/3000/assets/';  // TODO: 修改系统资源绝对路径
        return webpackConfig;
    },
};

将此网页url替换为图片中红框部分即可

终端连接

项目环境

终端对话框中使用cd命令进入项目目录，输入如下指令配置相关环境，此项耗时较长

yarn

Node版本报错

输入yarn指令后，出现如下报错

 The engine "node" is incompatible with this module. Expected version "8 || 10 || 12 || 14 || 16 || 17". Got "20.1.0"

大概意思是Node版本太高了不适配，但此环境中没配置nvm，不能便捷管理node版本，所以我们换一种方法，输入如下指令

yarn config set ignore-engines true

之后就可以继续啦

项目打包

不同项目package.json里配置稍有差别，这里输入的命令可能有所不同，以若依项目为例，输入如下代码

yarn run build:prod

一切顺利的话，可以看到项目目录中多了一个dist文件夹

项目部署

根据下图依次点击即可

弹出的对话框中，我们填写相关信息，应用文件目录选择刚刚打包好的dist文件夹

应用创建中，本项需要很长时间……

应用发布

创建成功后点击查看，此页面点击发布应用，填写信息，选择相应目录后即可

部署检验

发布成功后，点击发布管理，浏览器输入访问链接的网址，如果能成功打开，说明静态网页就已经部署成功了！

总结

大部分流程根据官方教程也大差不差能完成，其中项目导入、bable.config.js文件的修改以及node版本不适配的问题可以作为参考