1. 程式人生 > >vue專案構建-打包-釋出--簡易demo

vue專案構建-打包-釋出--簡易demo

一、vue專案構建
首先電腦要安裝node.js及npm
vue.js的官方文件給出的構建流程:

#全域性安裝 vue-cli
$ npm install --global vue-cli
#建立一個基於 webpack 模板的新專案
$ vue init webpack my-project
#安裝依賴,走你
$ cd my-project
$ npm install
$ npm run dev

 

二、vue專案的打包

#打包命令
$ npm run build

 

結果發現打包好後dist/index.html頁面裡的所有js,css,img等路徑有問題都是指向根目錄的。
此時需要修改config/index.js裡的assetsPublicPath的欄位,把初始專案裡的根目錄改為當前目錄,然後在執行打包命令,這是dist/index.html頁面就可以正常顯示了

 - ./  當前目錄
 - ../ 父級目錄
 - /  根目錄

 

三、釋出
把dist檔案裡內容放到apache伺服器上正常訪問就可以了
---------------------
然後開啟自己本地伺服器地址就可以了
http://localhost:8080/dist/index.html#/