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引入axios同源跨域問題，文章給大家提供了解決方案，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
vue中如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板詳解
有些業(yè)務(wù)需求需要點(diǎn)擊按鈕復(fù)制鏈接,下面這篇文章主要給大家介紹了關(guān)于vue中如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應(yīng)用程序
這篇文章主要介紹了Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應(yīng)用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖,我們詳細(xì)介紹了數(shù)據(jù)準(zhǔn)備、關(guān)系映射、點(diǎn)擊事件等關(guān)鍵步驟,需要的朋友可以參考下2023-09-09
vue實(shí)現(xiàn)點(diǎn)擊某個div顯示與隱藏內(nèi)容功能實(shí)例
最近做項(xiàng)目有用到某個div顯示與隱藏內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)點(diǎn)擊某個div顯示與隱藏內(nèi)容功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vant Weapp組件踩坑:picker的初始賦值解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue+iview tabs context-menu 彈出框修改樣式的方法
今天遇到一個需求說頁面頂部的菜單右鍵彈出框離得有點(diǎn)遠(yuǎn),需要我們做調(diào)整,下面小編給大家分享下vue+iview tabs context-menu 彈出框修改樣式的方法,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了Vue.js之mixins混合組件詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
Vue中如何進(jìn)行數(shù)據(jù)響應(yīng)式更新
Vue是一款流行的JavaScript框架，它提供了數(shù)據(jù)響應(yīng)式更新的能力，可以讓我們輕松地更新數(shù)據(jù)，并自動更新視圖，本文將介紹Vue中如何進(jìn)行數(shù)據(jù)響應(yīng)式更新，包括使用Vue的響應(yīng)式系統(tǒng)、使用計(jì)算屬性和使用Vue的watcher,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了關(guān)于vue.extend的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
詳解在Vue中使用TypeScript的一些思考(實(shí)踐)
這篇文章主要介紹了詳解在Vue中使用TypeScript的一些思考(實(shí)踐)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07