关于vue项目的构建，打包和发布过程的介绍

不言

发布时间：2018-06-29 15:31:52

1882人浏览过

来源于php中文网

原创

这篇文章主要介绍了关于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文件就可以访问了。

杰易CRM客户关系管理系统

软件介绍 a.. 当今的市场压力迫使企业在提高产品质量和性能的同时，降低成本和缩短产品上市的时间。每个企业都在努力更新自己，包括其生产过程和产品，以满足这些需求。实现这些目标的三种方法是：业务处理再设计、新技术应用、与顾客形成战略联盟。 b.. 对所有的商业应用只有建立整体的IT体系结构，才能形成战略优势，才能确定企业的突破口。这种新的体系结构是以三层结构标准为基础的客户关系

下载

三、github pages

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