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)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應用程序
這篇文章主要介紹了Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖,我們詳細介紹了數(shù)據(jù)準備、關(guān)系映射、點擊事件等關(guān)鍵步驟,需要的朋友可以參考下2023-09-09vue實現(xiàn)點擊某個div顯示與隱藏內(nèi)容功能實例
最近做項目有用到某個div顯示與隱藏內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)點擊某個div顯示與隱藏內(nèi)容功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12vue+iview tabs context-menu 彈出框修改樣式的方法
今天遇到一個需求說頁面頂部的菜單右鍵彈出框離得有點遠,需要我們做調(diào)整,下面小編給大家分享下vue+iview tabs context-menu 彈出框修改樣式的方法,感興趣的朋友跟隨小編一起看看吧2024-06-06