vue完成項目后,打包成靜態(tài)文件的方法
更新時間：2018年09月03日 09:54:43 作者：ZHANGLIZ
今天小編就為大家分享一篇vue完成項目后,打包成靜態(tài)文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue完成項目后，如何打包成靜態(tài)文件，并且用Node調(diào)試
打包
1、修改config里面的index.js里面的productionSourceMap為false,默認情況是true（true代表打包環(huán)境是開發(fā)環(huán)境，可以進行調(diào)試；false表示生產(chǎn)環(huán)境，正式上線的）
2.在cmd里面運行npm run build,(運行的是build里面的build.js文件)
生成的包放在dist下面
使用node進行調(diào)試
1、在根目錄下創(chuàng)建prod.server.js文件，這個文件的作用是作為一個小的httpserver，在正常開發(fā)下，可以直接把dist里面的文件放到tomcat里面進行調(diào)試
prod.server.js代碼
/**
* Created by Administrator on 2017/2/22.
*/
var express = require('express')
var config = require('./config/index')
var port = process.env.PORT || config.build.port
var app= express()
var router = express.Router()
router.get('/',function (req, res, next) {
req.url = '/index.html'
next()
})
app.use(router)
//異步接口
var seller=require('./src/data/data.json')
var apiRoutes = express.Router()
apiRoutes.get('/seller',function (req,res) {
res.json({
data:seller
})
})
app.use('/api', apiRoutes); //定義express靜態(tài)目錄 app.use(express.static('./dist')) var autoOpenBrowser = !!config.dev.autoOpenBrowser var uri = 'http://localhost:' + port var opn = require('opn') //啟動express module.exports = app.listen(port, function (err) { if (err) { console.log(err) return } // when env is testing, don't need open it if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { opn(uri) } })
以上這篇vue完成項目后,打包成靜態(tài)文件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了vue之nextTick全面解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue3 表單搜索內(nèi)容回顯到地址欄的實例代碼,地址欄輸入內(nèi)容回顯到form表單,同理表單輸入內(nèi)容也要回顯到地址欄中,本文結合實例代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了vue自定義翻頁組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了Vue組件之 高德地圖地址選擇功能的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
ElementUI實現(xiàn)el-table行列合并的操作步驟
在前端開發(fā)中,數(shù)據(jù)展示一直是一個重要的部分,而表格則是數(shù)據(jù)展示最常見的形式之一,ElementUI 是餓了么前端團隊推出的一款基于 Vue 的 UI 組件庫,其中的 el-table 組件是一個功能強大且靈活的表格組件,今天我們要詳細探討的是 el-table 的行列合并操作2024-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表無縫滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章介紹了在Linux服務器上部署vue項目的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
這篇文章主要給大家介紹了基于Vue3+Ts實現(xiàn)父子組件間傳值的兩種方式,使用v-model+emit傳值和使用v-bind+emit傳值兩種方式,文章通過代碼示例介紹的非常詳細,感興趣的同學可以參考閱讀2023-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)表格數(shù)據(jù)的增刪改查，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
tdesign和vue的子組件關閉是父組件執(zhí)行方法
這篇文章主要介紹了tdesign和vue的子組件關閉是父組件執(zhí)行方法,需要的朋友可以參考下2006-06-06