vue完成項(xiàng)目后,打包成靜態(tài)文件的方法
更新時間：2018年09月03日 09:54:43 作者：ZHANGLIZ
今天小編就為大家分享一篇vue完成項(xiàng)目后,打包成靜態(tài)文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue完成項(xiàng)目后，如何打包成靜態(tài)文件，并且用Node調(diào)試
打包
1、修改config里面的index.js里面的productionSourceMap為false,默認(rèn)情況是true（true代表打包環(huán)境是開發(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文件，這個文件的作用是作為一個小的httpserver，在正常開發(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') //啟動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)文件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue之nextTick全面解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
vue3 表單搜索內(nèi)容回顯到地址欄的實(shí)例代碼
這篇文章主要介紹了vue3 表單搜索內(nèi)容回顯到地址欄的實(shí)例代碼,地址欄輸入內(nèi)容回顯到form表單,同理表單輸入內(nèi)容也要回顯到地址欄中,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue自定義翻頁組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了Vue組件之 高德地圖地址選擇功能的實(shí)例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
ElementUI實(shí)現(xiàn)el-table行列合并的操作步驟
在前端開發(fā)中,數(shù)據(jù)展示一直是一個重要的部分,而表格則是數(shù)據(jù)展示最常見的形式之一,ElementUI 是餓了么前端團(tuán)隊(duì)推出的一款基于 Vue 的 UI 組件庫,其中的 el-table 組件是一個功能強(qiáng)大且靈活的表格組件,今天我們要詳細(xì)探討的是 el-table 的行列合并操作2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表無縫滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章介紹了在Linux服務(wù)器上部署vue項(xiàng)目的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
Vue3+Ts實(shí)現(xiàn)父子組件間傳值的兩種方式
這篇文章主要給大家介紹了基于Vue3+Ts實(shí)現(xiàn)父子組件間傳值的兩種方式,使用v-model+emit傳值和使用v-bind+emit傳值兩種方式,文章通過代碼示例介紹的非常詳細(xì),感興趣的同學(xué)可以參考閱讀2023-09-09
vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法
這篇文章主要介紹了tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法,需要的朋友可以參考下2006-06-06