手把手教小白部署vue教程

最近在家写了个vue的demo，想着双十一买的服务器，就想把它部署上去给朋友们玩玩。奈何太菜，之前没有接触过服务器部署，就上网搜各种教程，但总有些不对劲。下面就当是自己的一个总结吧。

1.安装java环境 jdk

2.配置Tomcat

以上两步就不再赘述了，照着网上的教程一步一步来就OK啦。

3.在Tomcat的webapps下创建文件夹

我的项目名称为Pleasure，所以创建一个Pleasure的文件夹，后续会用到。这里以自己的实际项目为准。

4.在vue项目config/index.js文件中，设置assetsPublicPath: ‘/Pleasure/’

这里改为这个配置之后，最后编译产生的index.html中相关路径也会带上’/Pleasure’，不会报404的错误了。

5.在vue项目config/index.js文件中，配置productionSourceMap: false

6.在build/webpack.prod.config.js文件中，找到output，添加publicPath:’./’

 output: {path: config.build.assetsRoot,filename: utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),publicPath:'./'}

7.在build/webpack.base.config.js文件中，一样找到output，做如下修改

 output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? "./"+config.build.assetsPublicPath: "./"+config.dev.assetsPublicPath}

8.再到vue项目路径运行npm run build，生成dist文件夹

9.将dist文件夹复制到我们第3步创建的文件夹里，启动Tomcat即可

10.最后访问ip:port/Pleasure/dist/index.html

如在服务器上访问 http://localhost:8080/Pleasure/dist/index.html

其他的访问 http://49.XXX.XXX.XXX/Pleasure/dist/index.html

demo地址我会在下篇文章写vue前端跨域后放出来。

本人也是小白一枚，希望可以和大家多多交流，一起成长，冲冲冲。

手把手教小白部署vue教程相关推荐

拆装计算机主机,零基础如何组装电脑？装机之家手把手教您电脑组装教程图解...
自己组装电脑对于小白来说,确实是一个技术活,如果没有一点点电脑组装经验,肯定无从下手的.当然对于目前互联网信息化时代,想要找一篇装机教程并不难,那么我们跟着装机教程一步一步学习并实践,相信很快就可以将 ...
ESP8266 Non-OS SDK 开发之旅基础篇① 初识 Non-OS SDK，史上超级详细手把手教小白20分钟快速搭建SDK软件开发环境，完成第一个例子Hello World！
文章目录 1.前言 2. SDK概述 2.1 SDK使用流程 2.2 ESP8266 HDK -- 硬件开发工具 2.3 ESP8266 SDK -- 软件开发工具包 2.3.1 Non-OS SDK ...
C# SuperSocket 手把手教你入门傻瓜教程---5（探索自定义AppServer、AppSession，Conmmand，用配置文件App.comfig启动服务器）
C# SuperSocket 手把手教你入门傻瓜教程系列教程 C# SuperSocket 手把手教你入门傻瓜教程---1(服务器单向接收客户端发送数据) C# SuperSocket 手把手教你 ...
C# SuperSocket 手把手教你入门傻瓜教程---3（Telnet服务器和客户端请求处理）
C# SuperSocket 手把手教你入门傻瓜教程系列教程 C# SuperSocket 手把手教你入门傻瓜教程---1(服务器单向接收客户端发送数据) C# SuperSocket 手把手教你 ...
C# SuperSocket 手把手教你入门傻瓜教程---1（服务器单向接收客户端发送数据）
C# SuperSocket 手把手教你入门傻瓜教程系列教程 C# SuperSocket 手把手教你入门傻瓜教程---1(服务器单向接收客户端发送数据) C# SuperSocket 手把手教你 ...
手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
???作者:bug菌博客:CSDN.掘金等 ??公众号:猿圈奇妙屋 ??特别声明:原创不易,转载请附上原文出处链接和本文声明,谢谢配合. ??版权声明:文章里可能部分文字或者图片来源于互联网或者百度 ...
手把手教你用Vue.js封装Form组件
前言: 在日常使用vue开发WEB项目中,经常会有提交表单的需求.我们可以使用 iview 或者 element 等组件库来完成相关需求:但我们往往忽略了其中的实现逻辑,如果想深入了解其中的实现细节, ...
vue超详细教程，手把手教你完成vue项目
Vue 一. Vue简介 Vue是于2013年(与React框架同年发布)推出的一个渐进式.自底向上的前端框架,它的作者叫尤雨溪.那么什么叫做渐进式框架呢?比较官方的说法就是:以Vue内核作为核心 ...
vue 手机端答题页面_从0开始，手把手教你用Vue开发一个答题App
项目演示项目源码配套讲解视频教程说明本教程适合对Vue基础知识有一点了解,但不懂得综合运用,还未曾使用Vue从头开发过一个小型App的读者.本教程不对所有的Vue知识点进行讲解,而是手把手一步 ...

手把手教小白部署vue教程

手把手教小白部署vue教程相关推荐

最新文章

热门文章