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

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

如果你一开始是用测试appid创建的，也可以通过上图的方式更换成自己的小程序的appid。

1-3，开通云开发

---

这里云开发的开通，我就不做过多讲解了，我云开发课程里也讲过很多遍。大家可以去翻看下

只需要点击开发者工具里的云开发按钮，跟着提示一步步操作就可以快速开通云开发。

二，开通静态网站功能

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

我们上面云开发开通好以后，就可以在这里快速开通静态网站了。

点击以后，直接点击开通即可

这时候开通有个条件

我们必须按照要求改变自己小程序的付费方式，把我们的付费方式改成按量付费即可。

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

开通成功以后如下图。

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

三，部署网站

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

我们的静态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

      })

    })

  }

}





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

4-2，打包vue项目

---

然后就是build打包

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

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

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

---

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

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

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

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/858905