1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站

这个时候我们的静态网站功能就开通成功了。

开通成功以后如下图。

这个时候我们就可以把我们开发好的静态网页上传到网站供别人访问了。

三,部署网站

====================================================================

我们的静态html如下

点击上传文件,把我们的index.html文件上传到静态网站

这样就代表上传成功了。

访问我们的网站


上面把网页部署成功以后,我们就可以通过云开发为我们创建的默认网址来访问了。

点击上图所示的详情,就可以拿到访问我们网站的网址如下

上图箭头所示的网址,就是我们网页的访问网址。

如果你的html是以index命名的,我们使用云开发为我们分配的域名,就可以直接访问我们的网站。

study-gas4x-1258760189.tcloudbaseapp.com 就是云开发为我分配的网站域名,以后用户就可以直接通过这个域名访问我们的网站了。

其实到这里我们就可以成功的部署属于我们自己的网站了,无非就是你网页写的比石头哥再好看些。

但是有些同学觉得官方给分配的域名太长,不好记,想使用自己的域名。那么我们该如何配置自己的域名呢?

四,部署vue网站项目

=========================================================================

我们上面讲的是一个简单的index.html的部署,我们实际开发中,肯定不会只部署这么一个简单的页面。我们以当前最主流的vue网站的项目部署为例,来给大家讲讲如何把一个实战项目部署到云开发的静态网站来。

4-1,配置vue项目打包目录


我们要部署vue项目,就要把vue项目打包,关于vue项目的打包,不是本章的重点,大家如果要打包部署vue项目,还是希望大家要有些vue基础知识。当然了,石头哥后面也会出vue的相关课程。敬请期待。

我们在打包vue项目之前,需要做下简单的配置。

在vue.config.js里配置publicPath和outputDir,当然了outputDir默认就是打包到dist文件夹下。所以重点还是要publicPath和我们的打包文件名要一致。

这里把完整的vue.config.js贴出来给大家


module.exports = {

  // 要部署到二级目录下,就要加上这个,和二级目录名一致

  publicPath: 'dist/',

  // 输出文件目录

  outputDir: 'dist',

  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

  assetsDir: 'static',

  chainWebpack: config => {

    // 发布模式

    config.when(process.env.NODE_ENV === 'production', config => {

      config

        .entry('app')

        .clear()

        .add('./src/main-prod.js')



      config.set('externals', {

        vue: 'Vue',

        'vue-router': 'VueRouter',

        axios: 'axios',

        lodash: '_',

        echarts: 'echarts',

        nprogress: 'NProgress',

        'vue-quill-editor': 'VueQuillEditor'

      })



      config.plugin('html').tap(args => {

        args[0].isProd = true

        return args

      })

    })



    // 开发模式

    config.when(process.env.NODE_ENV === 'development', config => {

      config

        .entry('app')

        .clear()

        .add('./src/main-dev.js')



      config.plugin('html').tap(args => {

        args[0].isProd = false

        return args

      })

    })

  }

}





4-2,打包vue项目


然后就是build打包

打包有点慢,耐心等待即可。

打包好的文件都会放在dist目录下

4-3,上传部署打包好的vue项目


上面打包好,我们接下来就要部署vue项目了。

部署其实很简单, 就是把打包好的文件直接上传到云开发静态网站即可。

直接点击确定,等待上传即可

等待所有文件上传成功。

可以看到我们的dist全部上传到了云开发。

4-4,配置访问路径


上面上传好以后,我们接下来就要配置访问路径了

然后我们就可以直接通过云开发为我们配置好的域名,直接访问我们的vue网站了。

是不是用云开发来部署vue网站很方便很简单。省去了服务器和域名的购买。

后面我会出一门vue系列的教程,从vue基础到vue项目的部署上线都有讲,敬请关注“编程小石头”

五,配置域名(选看)

========================================================================

其实前面3步就可以成功的部署自己的网站了,如果你有自己的域名,并且也成功的备案了,再来跟着石头哥学习这一节。如果没有自己的域名,那么你就要先去注册自己的域名,并备案了。所以这一节作为一个选学。

在网站配置里添加自己的域名
前端资料汇总

我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。

首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。

更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点:和什么人、做什么事、给多少钱,要给这三者在自己的心里划分一个比例。
最后,祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

  • 14
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值