详解vue项目的构建，打包，发布全过程
很多朋友对于VUE项目的一系列流程不熟悉，小编根据网友提出的问题，整理了关于vue项目的构建打包发布全过程，希望对你有用。
一、vue项目的创建
1、首先第一肯定是要有Node.js及npm这个不多说了
2、安装脚手架
此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览，使用vue全家桶制作自己的博客。 现在就有我来说说如何讲vue项目发布到github上 之前写过vue环境搭建 可以参考： vue环境搭建
二、vue项目的打包
1、大家都知道使用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文件就可以访问了。
三、github pages
1、首页创建一个仓库，此处直接忽略
2、在这里选择master或者/doc 上传代码到master
3、上面有一行域名就是你自己的页面可以看到自己发布的项目
四、自定义域名
1、这个时候就可以浏览自己的项目了，但是
username.github.io/xxx/dist
这样的地址着实不是很美观，大家可以去阿里云上，自己买个域名，解析一下，网上都有，可以进行自定义的域名，来制作的自己的博客，代码部署到github上。这篇文章这里就先不做讲解了，有想使用自定义域名，也可以私信我。
相关文章
Vue是一个流行的前端框架，许多web开发人员使用Vue来构建他们的应用程序。然而，正如任何其他框架一样，Vue也可能会发生错误。在这篇技术文章中，我们将探讨Vue常见的报错以及如何解决它们2023-03-03
Vue Router 配合 keep-alive 不生效的问题及解决方案
我在 app.vue 中使用了 router-view 标签,来展示 layout 和其他一级路由,然后在 layout 下的 main 区域使用了一个 router-view 来展示通过菜单栏切换的子路由,下面给大家介绍Vue Router 配合 keep-alive 不生效的问题及解决方案,感兴趣的朋友一起看看吧2024-01-01
在vue2中我们通常会在模板中通过三目运算符和require来实现动态图片,下面这篇文章主要给大家介绍了关于Vite不能使用require问题的解决方法,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了浅谈vue生命周期共有几个阶段？分别是什么？具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
解决vue3中from表单嵌套el-table时填充el-input,v-model不唯一问题
这篇文章主要给大家介绍一下如何解决vue3中from表单嵌套el-table时填充el-input,v-model不唯一问题，文中有相关的解决方法，通过代码示例介绍的非常详细,需要的朋友可以参考下2023-07-07
本文主要介绍了vue路由权限和按钮权限的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了在Vue2和Vue3中如何使用watch侦听器，分别对vue2及vue3作了详细的说明，有需要的朋友可以借鉴参考下，希望能够有所帮助2021-09-09
Vue Element前端应用开发之整合ABP框架的前端登录
VUE+Element 前端是一个纯粹的前端处理，前面介绍了很多都是Vue+Element开发的基础，从本章随笔开始，就需要进入深水区了，需要结合ABP框架使用2021-05-05
这篇文章主要介绍了vue自定义标签和单页面多路由的实现代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
vue-cli3+typescript新建一个项目的思路分析
这篇文章主要介绍了vue-cli3+typescript新建一个项目的思路，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
最新评论