快捷導(dǎo)航

詳解vue項(xiàng)目的構(gòu)建，打包，發(fā)布全過(guò)程

更新時(shí)間：2017年11月23日 10:09:31 投稿：laozhang

小編給大家通過(guò)本文詳細(xì)介紹了關(guān)于vue.js項(xiàng)目的構(gòu)建、打包、發(fā)布的全過(guò)程，文章很以后價(jià)值，值得你參考。

很多朋友對(duì)于VUE項(xiàng)目的一系列流程不熟悉，小編根據(jù)網(wǎng)友提出的問(wèn)題，整理了關(guān)于vue項(xiàng)目的構(gòu)建打包發(fā)布全過(guò)程，希望對(duì)你有用。

一、vue項(xiàng)目的創(chuàng)建

1、首先第一肯定是要有Node.js及npm這個(gè)不多說(shuō)了

2、安裝腳手架

此時(shí)可以直接瀏覽-但是現(xiàn)在肯定有很多小白想將他發(fā)布到gitHub上并可以瀏覽，使用vue全家桶制作自己的博客。現(xiàn)在就有我來(lái)說(shuō)說(shuō)如何講vue項(xiàng)目發(fā)布到github上之前寫過(guò)vue環(huán)境搭建可以參考： vue環(huán)境搭建

二、vue項(xiàng)目的打包

1、大家都知道使用npm run build進(jìn)行打包，這個(gè)時(shí)候你直接打開dist/下的index.html,會(huì)發(fā)現(xiàn)文件可以打開，但是所有的js，css，img等路徑有問(wèn)題是指向根目錄的，

此時(shí)需要修改config/index.js里的assetsPublicPath的字段，初始項(xiàng)目是/他是指向項(xiàng)目根目錄的也是為什么會(huì)出現(xiàn)錯(cuò)誤，這時(shí)改為./

./ 當(dāng)前目錄 ../ 父級(jí)目錄 / 根目錄

根目錄：在計(jì)算機(jī)的文件系統(tǒng)中，根目錄指邏輯驅(qū)動(dòng)器的最上一級(jí)目錄，它是相對(duì)子目錄來(lái)說(shuō)的；

它如同一棵大樹的“根”一般，所有的樹杈以它為起點(diǎn)，故被命名為根目錄。以微軟公司開發(fā)的Windows操作系統(tǒng)為例：

打開我的計(jì)算機(jī)（計(jì)算機(jī)），雙擊C盤就進(jìn)入C盤的根目錄。雙擊D盤就進(jìn)入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文件就可以訪問(wèn)了。

三、github pages

1、首頁(yè)創(chuàng)建一個(gè)倉(cāng)庫(kù)，此處直接忽略