一、如何将vue初始项目发布到github上

ixlei 发布于2019-08-21 15:50 / 2269人阅读

摘要：使用构建一个新项目发布到上并浏览一项目的创建首先第一肯定是要有及这个不多说了安装脚手架此时可以直接浏览但是现在肯定有很多小白想将他发布到上并可以浏览，使用全家桶制作自己的博客。

使用vue-cli构建一个新项目发布到github上并浏览 一、vue项目的创建

1、首先第一肯定是要有Node.js及npm这个不多说了
2、安装脚手架

此时可以直接浏览
-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览，使用vue全家桶制作自己的博客。

现在就有我来说说如何讲vue项目发布到github上

二、vue项目的打包

1、大家都知道使用npm run build进行打包，这个时候你直接打开dist/下的index.html,会发现文件可以打开，但是所有的js，css，img等路径有问题是指向根目录的，此时需要修改config/index.js里的assetsPublicPath的字段，初始项目是/他是指向项目根目录的也是为什么会出现错误，这时改为./

  build: {
    env: require("./prod.env"),
    index: path.resolve(__dirname, "../dist/index.html"),
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static",
    assetsPublicPath: "./",
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ["js", "css"],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

在从dist根目录打开index文件就可以访问了。

三、github pages

1、首页创建一个仓库，此处直接忽略

2、在这里选择master或者/doc 上传代码到master

3、上面有一行域名就是你自己的页面可以看到自己发布的项目

四、自定义域名

1、这个时候就可以浏览自己的项目了，但是

username.github.io/xxx/dist
这样的地址着实不是很美观，大家可以去阿里云上，自己买个域名，解析一下，网上都有，可以进行自定义的域名，来制作的自己的博客，代码部署到github上。这篇文章这里就先不做讲解了，有想使用自定义域名，也可以私信我。

总结

这里发布页面，其实最主要的时候坑是路径问题，需要修改配置文件，大家没事可以多多浏览文档了解vue的整体架构逻辑，后续再给大家带来框架从入门到放弃。

项目地址：
https://github.com/zhengjianl...

预览地址：
https://zhengjianli126.github...

后续会就在这个目录一步一步拆分给大家带来如何使用vue2全家桶+webpack2构建一个博客

云服务器 GPU云服务器如何将网页发布到阿里云服务器上将项目发布到阿里云服务器上怎么将项目发布到阿里云服务器上将项目部署到云服务器上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88284.html

如何在github上创建个人项目的在线演示demo

摘要：在上搜索相关项目时会发现，有的项目不光写了一手好文档并且还给出了项目的在线运行。如何在维护源代码的同时并同时生成项目主页以下以的单页应用为例，给出完整的项目维护以及生成项目主页的步骤。后期可在该基础上进行自己项目的开发。前言 Github作为目前优秀的同性交友平台，其上维护了众多优秀的开源项目。目前Github上关于前端的项目也是数不胜数，Vue、React、Angular等等。自己...

kid143 2019-08-20 14:26 评论0 收藏0
Vue2学习之旅一：初始化项目搭建（不带路由）

摘要：除此之外，你还可以运行打包命令此时之前说的打包生成的文件应该就生成了，或者选择用浏览器打开应该也可以看见和刚刚一样的结果。而如何创建一个对象是知道，因此开头引入了，并使用它常见了一个对象，然后这个对象就管理了这一块区域。作者：心叶时间：2018-04-25 16:33 本篇最终项目文件Github地址：github.com/paper520/vue.quick/tree/V1 Vue...

lijy91 2019-08-22 16:43 评论0 收藏0
快速入门 - Vue2 Tutorials (一)

摘要：在这个组件里面有一些链接列表，和，这些列表直接使用编写按照传统的写法，如果我们需要往里面添加链接的时候，每次我们都得添加和标签。所以修改如下这样我们就把数据和视图分开了，模板里面的代码也简洁了很多，不再需要写很多重复的代码。 Vue 的官方文档对 Vue 介绍非常详细，但官方文档使用在 HTML 中引入 vue 的方式进行讲解，而实际项目中一般使用脚手架如 vue-cli 初始化项目...

djfml 2019-08-20 17:47 评论0 收藏0
vue服务端渲染demo将vue-cli生成的项目转为ssr

摘要：无需使用服务器实时动态编译，而是使用预渲染方式，在构建时简单地生成针对特定路由的静态文件。与可以部署在任何静态文件服务器上的完全静态单页面应用程序不同，服务器渲染应用程序，需要处于运行环境。更多的服务器端负载。目录结构 -no-ssr-demo 未做ssr之前的项目代码用于对比 -vuecli2ssr 将vuecli生成的项目转为ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 评论0 收藏0
如何更有效率和质量地开发Vue项目

摘要：前言自总结完了上篇前端工程化的思想，并在全家桶的项目加以实践，趁热给大家总结一篇如何更有效率与质量地开发项目，以及其中踩过的一个个坑。。。前言自总结完了上篇前端工程化的思想，并在vue全家桶的项目加以实践，趁热给大家总结一篇如何更有效率与质量地开发vue项目，以及其中踩过的一个个坑。。。基于vue-cli的自定义模板（Custom Templates）小伙伴们的vue项目应该都...

ShevaKuilin 2019-08-20 18:15 评论0 收藏0