打包的Vue靜態檔案放入express

2021-10-08 10:36:15 字數 771 閱讀 1405

一、nodejs express 搭建

1.全域性安裝express-generator

npm

install express-generator -g

2.專案初始化

express -e server
3.進入專案

cd server //進入專案目錄下
4.安裝依賴

npm

install // 使用cnpm安裝可能會出現丟包現象

5.執行

npm start
6.瀏覽器中開啟http://localhost:3000

7.修改預設埠號

在根目錄下找到\bin\www檔案

如下圖,修改為「8210」

可使用http:localhost:8210啟動專案

二, vue專案打包

npm run build

三,將vue打包的檔案放到nodejs下執行

webpack打包 vue檔案

在webpack中配置.vue元件頁面的解析 vue loader 1 執行npm i vue s將vue安裝為執行依賴 2 運cnpm i vue loader vue template compiler d將解析轉換vue的包安裝為開發依賴 3 執行npm i style loader css ...

vue專案靜態資源打包方法

如何用.npm run build打包靜態資源 1.開啟build資料夾下的webpack.base.conf.js,如下圖,將紅圈地方改為紅箭頭所指的一行 2.開啟config資料夾下index.js如下圖,將藍箭頭所指改為紅箭頭所指 3.開啟build資料夾下的utils.js如下圖,將圈出的 ...

2 vue專案打包及靜態檔案報錯解決

通過vue cli建立的專案 npm run dev執行開發環境可以看到效果,但是npm run bulid之後,生成的dist檔案下的index.html直接開啟不顯示內容,看不到效果,報錯如下 在 webpack.prod.conf.js 中的 output 新增引數publicpath 具體 ...