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

谁践踏了优雅 2021-09-30 12:04 409阅读 0赞

## 一、vue项目的创建 ##

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

![1032087-20170527003853919-908795705.png][]

*  此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览，使用vue全家桶制作自己的博客。
 *  现在就有我来说说如何讲vue项目发布到github上
 *  之前写过vue环境搭建 可以参考： [vue环境搭建][vue]

## 二、vue项目的打包 ##

1、大家都知道使用`npm run build`进行打包，这个时候你直接打开`dist/`下的`index.html`,会发现文件可以打开，但是所有的`js，css，img`等路径有问题是指向根目录的，

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

*   ./ [当前目录][Link 1]
 *   ../ 父级目录

*   / 根目录
 *      根目录：在计算机的文件系统中，根目录指逻辑驱动器的最上一级目录，它是相对子目录来说的；
        　　　　它如同一棵大树的“根”一般，所有的树杈以它为起点，故被命名为根目录。以微软公司开发的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`文件就可以访问了。

## 三、github pages ##

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

![1032087-20170527004641325-2083552137.png][]

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

![1032087-20170527004610372-1366503249.png][]

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

![1032087-20170527004700044-243275675.png][]

## 四、自定义域名 ##

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

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

# 总结 #

--------------------

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

转载于:https://www.cnblogs.com/hi-shepherd/p/6911098.html

[1032087-20170527003853919-908795705.png]: /images/20210724/e44de010a1f84ed79ebd649a13b23608.png
[vue]: http://www.cnblogs.com/hi-shepherd/p/6662348.html
[Link 1]: https://www.baidu.com/s?wd=%E5%BD%93%E5%89%8D%E7%9B%AE%E5%BD%95&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLnycduARsPHmvmhRzmWNb0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHfYnHbLPHb4
[1032087-20170527004641325-2083552137.png]: /images/20210724/1fd8abb78eab406691e44bdb9de54d64.png
[1032087-20170527004610372-1366503249.png]: /images/20210724/2f277be5405f4f2381c22f5e7d361a86.png
[1032087-20170527004700044-243275675.png]: /images/20210724/b53a21c80dfc439dada23d872b515e63.png