vue webpack文件打包后的文件如何本地運行

（一）搭建express本地服務器

1、安裝express-generator

npm i express-generator -g

 

2、創建一個express項目 

express my-express-project

 

3、進入項目目錄 

cd my-express-project 

 

這時候能看到my-express-project文件夾下的內容是這樣的

4、安裝相關項目依賴

npm install

 

然后把剛剛打包后的dist文件夾下的所有文件復制到public文件夾下面 

5、啟動項目 

npm run start

 

6、瀏覽器中查看

在地址欄輸入localhost:3000即可

 

前端小伙伴第一次接觸vue的時候會涉及到webpack打包代碼文件后本地運行路徑不對的問題，博主遇到的是這樣的問題不知道與你們的是否一樣，如下圖

 

 

 

如果遇到這樣的問題，那是引文webpack打包的資源文件是根目錄的形式，即：‘/’  與  ‘./’的區別（后者是相對路徑）

此時百度一下，會有網友說建立本地服務運行代碼不就行了    確實啊，博主也很同意這種辦法，我就提供大家兩個辦法：

1，nodeJS建立本地服務

 

 

 

打包后的文件在dist目錄，建立sercer.js文件（文件名自定義）

server.js

 

 

 

運行server.js

 

 

瀏覽器打開localhost:8888 你的本地頁面就可以運行了

2，http-server方法

命令一：npm install http-server -g 全局

命令二：http-server

 

 

 

默認的是8080端口

通過命令http-server -a 0.0.0.0 -p 8081可以修改端口號

打開提供的三個中的任意鏈接都可以打開本地打包的頁面（只要打開地址會默認尋找index.html）

轉自: https://www.jianshu.com/p/893aea17b9d4