vue项目打包发布线上环境
文章目录
说明
发现一些朋友在群里询问如何线上发布vue项目.
从而暴露出来很多有意思的问题.
所以这篇博文简单介绍一下vue项目线上发布的情况.
本地环境
mac os
node 10.16
vue 2.6
vue-cli 4.0
线上环境
centOS6
node 10.16
nginx
vue是最近很火的前端框架,
所以它依赖的是浏览器,及我们可以从浏览器定位到你服务器nginx,然后nginx把指定的静态资源转发出来,最后我们在浏览器渲染看到
不管你的服务器是iis,apache还是nginx
只要http可以定位到服务器的静态资源即可.
很多人会有问号?
那为什么我在开发的时候用node命令直接就启动了呢!
npm run dev
这是因为我们本地并没有web静态服务器去定位资源,
所以node本地启动了web服务器来守护一个进程,达到资源转发的效果,
而且vue 启动的本地server可以直接帮我们做api代理.
如下是部分关于本地server的配置
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/admin': {
target: '这里是你的代理api地址',
changeOrigin: true,
secure: false
}
}
}
所以线上发布的时候,我们服务器本来就有web服务器,完全不需要node再启动一个web服务,或者说干脆不需要node都可以.
项目build
项目build构建文件
打包压缩后的静态资源文件被放到了dist 目录下
const {
run
} = require('runjs')
const chalk = require('chalk')
const config = require('../vue.config.js')
const rawArgv = process.argv.slice(2)
const args = rawArgv.join(' ')
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
const report = rawArgv.includes('--report')
run(`vue-cli-service build ${args}`)
const port = 9526
const publicPath = config.publicPath
var connect = require('connect')
var serveStatic = require('serve-static')
const app = connect()
app.use(
publicPath,
serveStatic('./dist', {
index: ['index.html', '/']
})
)
app.listen(port, function () {
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
if (report) {
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
}
})
} else {
console.log(chalk.green(`环境:${process.env.NODE_ENV},publicPath${publicPath},args:${args}`));
run(`vue-cli-service build ${args}`)
}
发布dist
把你的生成静态文件上传到服务器,
我是直接git clone
配置nginx
server {
listen 80; # 监听80端口
server_name admin.yijiebuyi.com; # 浏览器域名
location / {
root /home/www/admin/dist/; # 服务器静态文件存放的目录
index index.html; # 主页
}
location /admin {
proxy_pass http://api.yijiebuyi.com/; # 代理接口地址
}
}