详细说明vue项目建设、包装、发布的全过程

很多朋友都不熟悉vue项目的一系列流程。根据网友提出的问题，边肖整理了VUE项目建设、包装、发布的全过程，希望对大家有用。

I .创建vue项目

1.首先肯定有Node.js和npm，这就不多说了

2.安装脚手架

这个时候你可以直接浏览——但是现在肯定有很多小白想把他发布到gitHub上浏览，用vue家族的水桶做自己的博客。现在，让我谈谈如何在vue项目发布到github之前谈论它。可以参考vue环境建设：vue环境建设。

二、vue项目的包装

1.每个人都知道使用npm运行构建进行打包。这时，如果直接打开dist/下的index.html，会发现文件是可以打开的，但是所有的js、css、img等路径都有问题并指向根目录。

此时需要修改config/index.js中的assetsPublicPath字段，初始项目是/指向项目的根目录，为什么会出现错误，所以改为。/。/当前目录./父目录/根目录

根目录：在计算机的文件系统中，根目录是指逻辑驱动器的最高级别目录，相对于子目录；

它就像一棵大树的“根”，所有的树枝都以它为起点，所以被命名为根目录。以微软开发的Windows操作系统为例：

打开我的电脑(电脑)，双击c盘进入c盘根目录。双击磁盘进入磁盘根目录

build: { env: require('。/prod.env ')，index : path . resolve(_ _ dirname '，/dist/index.html ')，assetroot : path . resolve(_ _ dirname '，/dist ')，assetsSubDirectory: ' static '，assetsPublicPath: '。/'，productionSourceMap: true，//Gzip默认关闭，因为许多流行的静态主机(如//Sphing或Netlify)已经为您Gzip了所有静态资产。//在设置为' true '之前，请确保为：//NPM install-save-dev compression-web pack-plugin production gzip : false，production gzipxextensions 3360[' js '，' css']，//运行build命令，并在生成完成后将一个额外的参数设置为///View bundle analyzer report : process/` NPM Run build-report `//设置为' true '或' false '以始终打开或关闭bundle analyzer report : process . env _ NPM。

第三，github页面

1.在主页上创建一个仓库，这里直接忽略

2.在此选择主或/文档，将代码上传至主

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

第四，自定义域名

1.您现在可以浏览自己的项目，但是

username.github.io/xxx/dist

这个地址不是很漂亮。你可以去阿里巴巴云，买自己的域名，分析一下。网上有。您可以自定义域名来创建自己的博客，并将代码部署到github。本文就不解释了。如果你想使用自定义域名，可以私信我。