一、構(gòu)建 VUE 項(xiàng)目

直接用官網(wǎng)的方式建立vue 項(xiàng)目

vue init webpack vue-demo

二、打包 VUE 項(xiàng)目

npm run build

2.1 打包項(xiàng)目介紹

會(huì)在項(xiàng)目根目錄下出現(xiàn)一個(gè) dist 文件夾，項(xiàng)目目錄如下圖：

打包.png

.
1、這便是打包后的文件，直接將dist 文件夾放到服務(wù)器就可以。
2、原 vue 下 src/assets/ 內(nèi)的文件會(huì)被壓縮、轉(zhuǎn)為Base64等；
3、原 vue 下 static/ 下的文件，會(huì)直接放入壓縮后的 static/ 內(nèi)。

三、打包后的 dist 項(xiàng)目 白屏、圖片路徑錯(cuò)誤解決。

我們直接打開 dist/index.html 發(fā)現(xiàn)頁面為白屏，且圖片路徑也發(fā)生錯(cuò)誤。這需要對打包過程進(jìn)行配置。

1、 config->index.js 修改：

config.png

2、build->utils.js 添加：

utils.png

3、圖片路徑的寫法

（1）src/assets/ 下：

<img src="../assets/img/loginback.png" class="test-img" />            // html

background: url('../assets/img/loginback.png') no-repeat top left ;   // css

（2）static/ 下：

<img src="../../static/img/loginback.png" class="test-img" />            // html

background: url('../../static/img/loginback.png') no-repeat top left ;   //  css

參考文獻(xiàn)：
https://www.cnblogs.com/muamaker/p/8023522.html
https://blog.csdn.net/qq_25479327/article/details/79625621