Vue项目如何打包并部署(nginx)

使用场景:

我们常使用前后端分离项目时,会需要将前端vue打包然后部署。

一.打包

vue项目其实可以直接通过一下语句进行打包：

npm run build

默认打包情况如下:

当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置:

1.首先在项目根目录下创建vue.config.js文件

配置内容如下所示(附带跨域问题解决):

module.exports = {//打包publicPath: './',outputDir: 'test', //打包输出目录assetsDir: './static', //放置生成的静态资源filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存lintOnSave: false, //设置是否在开发环境下每次保存代码时都启用 eslint验证productionSourceMap: false,// 打包时不生成.map文件// 解决跨域配置devServer: {                //记住，别写错了devServer//设置本地默认端口  选填port: 8080,proxy: {                 //设置代理，必须填'/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定target: 'http://localhost:9090',     //代理的目标地址(后端设置的端口号)changeOrigin: true,              //是否设置同源，输入是的pathRewrite: {                   //路径重写'/api': ''                     //选择忽略拦截器里面的单词}/*也就是在前端使用/api可以直接替换为(http://localhost:9090)*/}}},
}

2.查看路由中(router/index.js)是否使用history,是的话修改为hash。或者将mode直接注掉，因为默认使用hash。

const router = new VueRouter({/*mode: 'history',*/mode: 'hash',routes:[]
})export default router

然后再次使用npm run build进行打包就会出现test文件夹,已经其中静态文件会放置到static中。

到此打包已经结束。

3.找到打包后文件的路径

双击打包好的index.html文件,就可以看到是首页了。

二.部署(nginx)

首先需要安装nignx,这个毋庸置疑这里就不介绍。(或者后续会在nginx板块放置具体安装步骤)

直接在nginx.conf中进行配置即可:

server {listen   8021;server_name  localhost;location /test{alias    /home/hyq/vue_file;index  index.shtml index.html index.htm;}

配置具体含义见:Nginx配置信息_憨憨要秃头的博客-CSDN博客

然后启动或者重启nginx即可。

访问:服务器地址:8021/test 即可。

Vue项目如何打包并部署(nginx)相关推荐

Vue项目怎样打包并部署在WindowsServer服务器通过IP访问
场景 Vue本地执行build之后打开dist目录下index.html正常访问: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
Vue项目的打包\部署\优化
Vue项目的打包\部署\优化如果有帮助到你麻烦点个赞或者收藏 +关注哟以后会经常发布一些干货文章我只是一个前端小菜鸟,大佬勿喷! 一.nginx 开启 gzip 理论上,nginx 开启 ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
vue项目dist编译文件部署到服务器：页面空白、F5刷新报错404、403报错、等等bug - 总结篇
文章目录问题一. vue编译打包dist文件之后部署到线上服务器 ,访问页面却是空白? 问题二.如果不是空白,页面F5之后就又变成空白? 以Nginx服务器为例,(如下图FTP所示) `404报错: ...
vue项目构建打包发布三部曲
一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了 2.安装脚手架此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的 ...
Vue项目从打包优化到上线部署云服务器的全过程（**教你在云服务器上优化部署自己的项目**）
前言作为前端开发人员,我们不仅要会写代码,优化打包,上线部署也是一个前端工程师必备的技能,这篇文章就教大家从零开始,把一个完整项目打包发布到线上服务器.首先的准备工作就是需要一台云服务器. 项目打包 ...
Springboot项目与vue项目整合打包
我的环境 * JDK 1.8 * maven 3.6.0 * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定 ...
Vue项目如何打包并且发布
如何将Vue项目打包并发布?我这边是测试发布到本地,不过步骤是一样的,步骤如下: 1.安装部署Nginx服务器.(类似Tomcat服务器) 说明:Nginx (engine x) 是一个高性能的HTT ...

Vue项目如何打包并部署(nginx)

使用场景:

一.打包

二.部署(nginx)

Vue项目如何打包并部署(nginx)相关推荐

最新文章

热门文章