vue项目前端node部署方式
目录
vue项目前端node部署方式
前端在开发完成之后，首先需要部署，然后才能访问。
当然打包部署的方式有很多种，这里简单介绍一下使用vue开发时，前端简单进行打包并部署的方式，方便快捷，毫不费力。
首先在根目录下增加两个文件，分别是server.js和webpack-server-config.js，如图所示
其中，server.js中内容如下：
const express = require('express')
const chalk = require('chalk')
const app = express()
const appPort = 8088
const history = require('connect-history-api-fallback')
app.use(history())
app.use(express.static('./'))
app.listen(appPort, function() {
console.log(
chalk.green(
"启动完成(●'◡'●)ﾉ♥ ",
chalk.underline('App listening on port: 8088')
)
)
})port是自己设置的访问时的参数，history是在路由中mode未history方式的处理。
webpack-server-config.js中文件内容：
const path = require('path')
module.exports = {
entry: {
server: './server.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].js'
},
target: 'node',
module: {
}
}这里主要是引入了刚刚的文件，并在打包时输出一个新的文件。
最后，在package.json中，在执行build的命令中加入该语句即可
然后就是执行命令即可。
npm run build
cd dist
node server.js
执行完，最后在控制台可以看到
然后输入自己的本地ip加端口就可以访问啦~~