详解vue项目的构建,打包,发布全过程


Posted in Javascript onNovember 23, 2017

很多朋友对于VUE项目的一系列流程不熟悉,小编根据网友提出的问题,整理了关于vue项目的构建打包发布全过程,希望对你有用。

一、vue项目的创建

1、首先第一肯定是要有Node.js及npm这个不多说了

2、安装脚手架

详解vue项目的构建,打包,发布全过程

此时可以直接浏览-但是现在肯定有很多小白想将他发布到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、首页创建一个仓库,此处直接忽略

详解vue项目的构建,打包,发布全过程

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

详解vue项目的构建,打包,发布全过程

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

详解vue项目的构建,打包,发布全过程

四、自定义域名

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

username.github.io/xxx/dist

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

Javascript 相关文章推荐
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
微信小程序实现留言功能
Oct 31 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
vue实现数字滚动效果
Jun 29 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 #Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 #Javascript
基于Bootstrap实现城市三级联动
Nov 23 #Javascript
bootstrap-Treeview实现级联勾选
Nov 23 #Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 #Javascript
sublime text配置node.js调试(图文教程)
Nov 23 #Javascript
Vue代码分割懒加载的实现方法
Nov 23 #Javascript
You might like
浅析51个PHP处理字符串的函数
2013/08/02 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
详解vuex的简单使用
2018/03/12 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python判断数字是否是超级素数幂
2018/09/27 Python
python实现超级马里奥
2020/03/18 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
python创建文本文件的简单方法
2020/08/30 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
在Python中实现字典反转案例
2020/12/05 Python
css3学习心得分享
2013/08/19 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
EJB的角色和三个对象
2015/12/31 面试题
vue+django实现下载文件的示例
2021/03/24 Vue.js
毕业生自荐书模版
2014/01/04 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android