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

創(chuàng)新互聯(lián)建站專(zhuān)業(yè)為企業(yè)提供東興網(wǎng)站建設(shè)、東興做網(wǎng)站、東興網(wǎng)站設(shè)計(jì)、東興網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、東興企業(yè)網(wǎng)站模板建站服務(wù)，10多年東興做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

一、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上 之前寫(xiě)過(guò)vue環(huán)境搭建 可以參考： vue環(huán)境搭建

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

1、大家都知道使用npm run build進(jìn)行打包，這個(gè)時(shí)候你直接打開(kāi)dist/下的index.html,會(huì)發(fā)現(xiàn)文件可以打開(kāi)，但是所有的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ō)的；

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

打開(kāi)我的計(jì)算機(jī)（計(jì)算機(jī)），雙擊C盤(pán)就進(jìn)入C盤(pán)的根目錄。雙擊D盤(pán)就進(jìn)入D盤(pán)的根目錄

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根目錄打開(kāi)index文件就可以訪(fǎng)問(wèn)了。

三、github pages

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

2、在這里選擇master或者/doc 上傳代碼到master

3、上面有一行域名就是你自己的頁(yè)面可以看到自己發(fā)布的項(xiàng)目

四、自定義域名

1、這個(gè)時(shí)候就可以瀏覽自己的項(xiàng)目了，但是

username.github.io/xxx/dist

這樣的地址著實(shí)不是很美觀(guān)，大家可以去阿里云上，自己買(mǎi)個(gè)域名，解析一下，網(wǎng)上都有，可以進(jìn)行自定義的域名，來(lái)制作的自己的博客，代碼部署到github上。這篇文章這里就先不做講解了，有想使用自定義域名，也可以私信我。

文章名稱(chēng)：詳解vue項(xiàng)目的構(gòu)建，打包，發(fā)布全過(guò)程
當(dāng)前路徑：http://www.rwnh.cn/article34/psgepe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站收錄、ChatGPT、網(wǎng)站策劃、虛擬主機(jī)、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)