Vue打包并发布项目
2023-09-14 09:14:52 时间
一、 打包vue项目步骤:
1、对当前vue项目进行打包的命令如下:
npm run build
2、打包完成,会输出Build complete并且在vue项目中会生成一个名字为dist的打包文件。如下图:
二、 使用静态服务器工具包发布打包的vue项目
1、首先安装全局的serve,如下图:
命令如下:serve + 打包文件名
serve dist
效果图如下:
3、使用浏览器访问上图中输出的地址,效果图如下:
三、 使用动态 web 服务器(tomcat)发布打包的vue项目
1、修改配置: webpack.prod.conf.js文件,如下图:
2、重新打包,如下图:
3、修改dist 文件夹为项目名称: xxx(本例中xxx为vue_demotest),将 xxx(本例中xxx为vue_demotest) 拷贝到运行的 tomcat 的 webapps 目录下,如下图:
http://localhost:8080/xxx(本例中xxx为vue_demotest)
编码测试:
nom run dev
访问路径:http://localhost:8080
编码,自动编译打包,查看效果
相关文章
- 在vue中创建多个ueditor实例
- vue打包后空白页问题全记录 (background路径,css js404,jsonp等);
- vue webpack文件打包后的文件如何本地运行
- vue-cli内部webpack的打包优化
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- vue.js3: 用jszip打包压缩图片文件(vue@3.2.37 / jszip@3.10.0 / file-saver@2.0.5)
- vue+elementui项目打包后样式变化问题
- vue-cli内部webpack的打包优化
- vue.js3: 自定义video垂直可拖动的进度条(vue@3.2.36)
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- vue项目elementui 的 el-checkbox复选框改成单选框样式:实现全选、全否、单选、反选功能(最简单的方法)
- vue 使用editor 编辑器以及打包线上不显示问题
- vue.js项目打包报错Error: You appear to be using a native ECMAScript module configuration file
- vue-cli3打包项目不同环境:开发环境、生产环境、测试环境
- Vue项目打包部署Nginx配置及前端缓存问题解决
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- webpack打包Vue应用程序流程
- 049:vue+openlayers鼠标pointermove显示城市名片(示例代码)
- Vue 插槽 slot的简单实用
- Vue(八)vue 脚手架、脚手架创建项目示例
- 基于Java+SpringBoot+Vue+Uniapp(有教程)前后端分离健身预约系统设计与实现
- 【三十天精通Vue 3】第十一天 Vue 3 过渡和动画详解