• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

Vue.js项目发布到Github教程

编程语言 Geekerstar 1年前 (2018-04-14) 369次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

1.vue项目的创建

$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

2.配置文件修改

使用`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
}

3.打包

$ npm run build

4.建立远成仓库、关联、推送

– 第1步:创建一个名为`vue-demo`的Repository

– 第2步:运行下方命令,进行关联:

$ git init
$ git remote add origin git@github.com:geekerstar/vue-demo.git

– 第3步:通过如下命令进行代码合并

$ git pull --rebase origin master

– 第4步:添加文件、提交文件、推送到远程库

// 添加文件
$ git add -A
$ git add -f dist  // 强制添加dist文件夹,因为.gitignore文件中定义了忽略该文件

// 提交文件
$ git comit -m "my vue project"

// 推送到远程库
$ git push -u origin master

5.配置Github Pages

在项目中`Setting`内`Github Pages`选项内选择`master branch`并保存

访问网址为https://geekerstar.github.io/项目名

 


丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:Vue.js项目发布到Github教程
喜欢 (0)
[247507792@qq.com]
分享 (0)
Geekerstar
关于作者:
本站技术支持

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00