關於vue是怎么放到服務器上運行的基於vue-cli3

之前只接觸過將靜態頁面放到服務器上的操作，接觸vue項目后很好奇vue項目是怎么在服務器運行的

首先創建一個基於vue腳手架（vue-cli3）的vue項目 

vue create 項目名稱

 添加router

vue add router

 

 此時一個vue項目已搭建完畢，可以進行開發了

運行看下效果：（yarn serve）

 

看起來沒問題，然后執行yarn build 獲取打包后的dist文件

 

多的這個dist就是打包后的文件

文件內容：

 

直接打開index.html我們會發現是空白並且有報錯

 

 

這時需要在項目根目錄下增加vue.config.js文件

在文件中增加

module.exports = {
 publicPath: './' // <----這里就是會修改webpack的outPath.publicPath
}

同時注釋掉mode

 

 此時再重新打包vue文件（yarn build）　

 再打開dist文件的index.html文件，已經可以正常打開了

 

 

所以，直接將這個dist文件放到服務器上，訪問dist文件的index.html就可以了