vue项目 构建 打包 发布 三部曲

1、vue项目的建立

一、首先第一确定是要有Node.js及npm这个很少说了
二、安装脚手架

 

• 此时能够直接浏览-可是如今确定有不少小白想将他发布到gitHub上并能够浏览，使用vue全家桶制做本身的博客。
• 如今就有我来讲说如何讲vue项目发布到github上
• 以前写过vue环境搭建 能够参考： vue环境搭建 

2、vue项目的打包

一、你们都知道使用npm run build进行打包，这个时候你直接打开dist/下的index.html,会发现文件能够打开，可是全部的js，css，img等路径有问题是指向根目录的，

　  此时须要修改config/index.js里的assetsPublicPath的字段，初始项目是/他是指向项目根目录的也是为何会出现错误，这时改成./

 

• ./ 当前目录
• ../ 父级目录

• / 根目录

• 根目录：在计算机的文件系统中，根目录指逻辑驱动器的最上一级目录，它是相对子目录来讲的；
  　　　　它如同一棵大树的“根”通常，全部的树杈以它为起点，故被命名为根目录。以微软公司开发的Windows操做系统为例：
  　　　　打开个人计算机（计算机），双击C盘就进入C盘的根目录。双击D盘就进入D盘的根目录

 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文件就能够访问了。

3、github pages

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

 

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

三、上面有一行域名就是你本身的页面能够看到本身发布的项目

4、自定义域名

一、这个时候就能够浏览本身的项目了，可是

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

 

总结

---

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