Vue简单项目打包扔Tomcat服务器上

描述：前两步可以忽略，主要在第三步配置webpack.prod.conf.js文件上。

1、创建vue项目，项目创建成功后尝试运行。

1.使用vue-cli手脚架创建vue项目,vue_demo为项目名称

vue init webpack vue_demo

...此处省略设置项目名称等内容

项目目录结构：

2.创建完成过，进入项目根目录使用命令运行项目

进入项目：cd vue_demo

运行项目：npm run dev

3.浏览器输入命令行提示的地址查看运行效果 ，一般地址为http://localhost:8080

 

2、使用命令打包，然后使用serve运行打包后文件（夹）。

1、打包命令：npm run build

2、运行打包文件：serve dist

3、描述：执行完打包命令后，项目根目录下会出现disk文件；使用serve 命令加disk（文件夹）运行；如果提示serve命令不存就执行npm install -g serve 去全局安装已下运行环境即可。dist 文件暂时不能扔到Tomcat服务器运行，因为存在路径问题。经过第三步修改下配置文件中的路径信息，再次打包，扔到Tomcat运行即可。

 

3、修改一下配置文件，重新打包，然后扔到Tomcat应用服务器，启动服务器。

1、从根目录进build文件夹找webpack.prod.conf.js文件，修改文件中的output值，添加publicPath:'/vue_demo/'，注意“，”逗号。修改为/vue_demo/是为了运行Tomcat时在浏览器输入localhost:8080/vue_demo地址查看效果。文件名和配置对应。

2、运行npm run build重新打包。

3、直接将打包文件复制到Tomcat webapps目录下，并根据配置重新命名。

4、启动Tomcat ,输入localhost:8080/vue_demo查看效果。