vue完成項(xiàng)目后,打包成靜態(tài)文件的方法

更新時(shí)間：2018年09月03日 09:54:43 作者：ZHANGLIZ

今天小編就為大家分享一篇vue完成項(xiàng)目后,打包成靜態(tài)文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

vue完成項(xiàng)目后，如何打包成靜態(tài)文件，并且用Node調(diào)試

打包

1、修改config里面的index.js里面的productionSourceMap為false,默認(rèn)情況是true（true代表打包環(huán)境是開(kāi)發(fā)環(huán)境，可以進(jìn)行調(diào)試；false表示生產(chǎn)環(huán)境，正式上線的）

2.在cmd里面運(yùn)行npm run build,(運(yùn)行的是build里面的build.js文件)

生成的包放在dist下面

使用node進(jìn)行調(diào)試

1、在根目錄下創(chuàng)建prod.server.js文件，這個(gè)文件的作用是作為一個(gè)小的httpserver，在正常開(kāi)發(fā)下，可以直接把dist里面的文件放到tomcat里面進(jìn)行調(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') //啟動(dòng)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完成項(xiàng)目后,打包成靜態(tài)文件的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue之nextTick全面解析
本篇文章主要介紹了vue之nextTick全面解析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
vue3 表單搜索內(nèi)容回顯到地址欄的實(shí)例代碼
這篇文章主要介紹了vue3 表單搜索內(nèi)容回顯到地址欄的實(shí)例代碼,地址欄輸入內(nèi)容回顯到form表單,同理表單輸入內(nèi)容也要回顯到地址欄中,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-09-09
vue自定義翻頁(yè)組件的方法
這篇文章主要為大家詳細(xì)介紹了vue自定義翻頁(yè)組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
Vue組件之高德地圖地址選擇功能的實(shí)例代碼
這篇文章主要介紹了Vue組件之高德地圖地址選擇功能的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
ElementUI實(shí)現(xiàn)el-table行列合并的操作步驟
在前端開(kāi)發(fā)中,數(shù)據(jù)展示一直是一個(gè)重要的部分,而表格則是數(shù)據(jù)展示最常見(jiàn)的形式之一,ElementUI 是餓了么前端團(tuán)隊(duì)推出的一款基于 Vue 的 UI 組件庫(kù),其中的 el-table 組件是一個(gè)功能強(qiáng)大且靈活的表格組件,今天我們要詳細(xì)探討的是 el-table 的行列合并操作
2024-08-08
vue實(shí)現(xiàn)列表無(wú)縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表無(wú)縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
在Linux服務(wù)器上部署vue項(xiàng)目
這篇文章介紹了在Linux服務(wù)器上部署vue項(xiàng)目的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-11-11
Vue3+Ts實(shí)現(xiàn)父子組件間傳值的兩種方式
這篇文章主要給大家介紹了基于Vue3+Ts實(shí)現(xiàn)父子組件間傳值的兩種方式,使用v-model+emit傳值和使用v-bind+emit傳值兩種方式,文章通過(guò)代碼示例介紹的非常詳細(xì),感興趣的同學(xué)可以參考閱讀
2023-09-09
vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法
這篇文章主要介紹了tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法,需要的朋友可以參考下
2006-06-06