开发知识-九游会官网登录入口网页

如果您将您的应用部署到服务器的其他目录，如custom/vue-app下，那么您需要在src/o2.js文件中增加一行代码：o2.base = "../";

//src/o2.js
let o2 = window.o2;
let layout = window.layout;
o2.base = "../";
export {o2, layout};

至此，我们已经可以在o2平台的框架下，使用vue开发应用了。

　　虽然我们可以使用react开发o2应用，但上述模式在我们每次修改代码后，需要运行build命令，并手工上传到服务器，在开发比较复杂的应用时，还是比较影响效率的。下面价绍两种方式来应对这种情况。

本地运行o2服务器

　　您可以在本地运行服务器，然后直接在服务器的webserver目录下创建项目。然后您必须修改vue配置，使其编译到正确的路径。我们要修改项目目录下的vue.config.js文件：

module.exports = {
    publicpath: ".",
    outputdir: "../vue-app"
};

　　然后每次运行编译后，vue会将编译后的应用生成在webserver/vue-app/目录下，我们直接通过http://locahost/vue-app就可以查看运行结果。

通过部署工具自动化部署到远程服务器

　　当然，为了节省我们部署远程服务器的时间，我们可以使用javascript打包工具，自动完成这个过程，这里我们使用gulp，通过ftp或sftp来进行自动化部署到远程服务器。

　　这种方式不需要您本地运行o2服务器，但您必须有一台远程服务器，并可以通过ftp或sftp连接到服务器的webserver。

　　按上述方式创建好应用，然后我们安装gulp环境：

npm i -g gulp-cli

　　安装gulp以及gulp相关插件：

npm i gulp gulp-ftp gulp-sftp-up4 gulp-run -save-dev

　　在项目根目录新建gulpfile.js文件：

var gulp = require('gulp'),
    ftp = require('gulp-ftp'),
    sftp = require('gulp-sftp-up4'),
    run = require('gulp-run');
//根据您的实际服务器修改
var options = {
    'build': 'dist',
    'host': 'o2server服务器',
    'user': 'sftp user',
    'pass': 'sftp password',
    "port": 22,
    "remotepath": "/data/o2server/servers/webserver/vue-app"
};
//sftp任务
function upload_sftp(){
    var build = "dist/**/*";
    return gulp.src(build)
        .pipe(sftp({
            host: options.host,
            user: options.user || 'anonymous',
            pass: options.pass || null,
            port: options.port || 22,
            remotepath: (options.remotepath || '/')
        }));
}
//ftp任务
function upload_ftp(){
    var build = "dist/**/*";
    return gulp.src(build)
        .pipe(ftp({
            host: options.host,
            user: options.user || 'anonymous',
            pass: options.pass || null,
            port: options.port || 21,
            remotepath: (options.remotepath || '/')
        }));
}
//运行vue build
function build_vue() {
    return run('npm build').exec();
}
输出gulp任务，如果使用ftp，更换第二个任务为upload_ftp
exports.build = gulp.series(build_vue, upload_sftp);

　　然后，当开发或修改代码完成后，执行以下命令：

gulp build

　　就可以自动编译vue应用，并上传到o2服务器。通过浏览器访问：http://your-server/vue-app就可以看到结果。

　　当然，这只是一个很简单的例子，提供一个思路，您也可以使用其他您熟悉的工具实现相同或类似的功能。对于熟悉前端构建工具的用户，实现更便捷的功能也不是难事，比如可以监控文件改动，实时部署，并刷新浏览器等。

总结

　　本章给大家介绍了在o2平台的框架内，使用vue开发应用，并在o2服务器的webserver中运行了起来。它集成了o2平台的所有功能，您也不需要处理类似登录等一些繁琐的事，而且可以方便的调用o2的后端服务。并提供了一些优化开发模式的思路。