vue项目前端node部署方式

前端在开发完成之后，首先需要部署，然后才能访问。

当然打包部署的方式有很多种，这里简单介绍一下使用vue开发时，前端简单进行打包并部署的方式，方便快捷，毫不费力。

首先在根目录下增加两个文件，分别是server.js和webpack-server-config.js，如图所示

vue项目前端node部署方式

其中，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的命令中加入该语句即可

vue项目前端node部署方式

然后就是执行命令即可。

npm run build

cd dist

node server.js

执行完，最后在控制台可以看到

vue项目前端node部署方式

然后输入自己的本地ip加端口就可以访问啦~~

vue项目前端node部署方式

相关推荐