tomcat怎么部署vue（Vue脚手架安装初始化项目）
tomcat怎么部署vue（Vue脚手架安装初始化项目）# 1.在项目目录中执行如下命令:（2）在上篇文章已介绍，开发vue所需的环境安装nodejs，默认你已经安装好，紧接着输入 npm install，安装环境所需js依赖； vue init webpack my-first-vue 安装过程如下图所示：创建my-first-vue文件夹，在文件夹内打开控制台，输入vue init webpack my-first-vue（1）控制台如上图所示，说明vue项目初始化完成，cd my-first-vue进入初始化的项目；
1.创建Vue脚手架# 1.在本地文件目录创建my-first-vue文件夹，安装vue-cli脚手架:
npm install -g vue-cli
安装过程如下图所示：创建my-first-vue文件夹，在文件夹内打开控制台，输入npm install -g vue-cli
# 1.执行安装vue脚手架命令后，再初始化创建一个vue项目:
vue init webpack my-first-vue
安装过程如下图所示：创建my-first-vue文件夹，在文件夹内打开控制台，输入vue init webpack my-first-vue
（1）控制台如上图所示，说明vue项目初始化完成，cd my-first-vue进入初始化的项目；
（2）在上篇文章已介绍，开发vue所需的环境安装nodejs，默认你已经安装好，紧接着输入 npm install，安装环境所需js依赖；
# 1.在项目目录中执行如下命令:
vue run dev
用自己喜欢的编辑器打开vue，我比较喜欢用Visual Studio Code打开。
（1）打开vscode 打开项目文件即可进入，按着快捷键Ctrl ` 即可打开终端输入npm run dev 启动项目。 （2）当你打开谷歌浏览器输入http://localhost:8080，即可看见Vue的初始化界面。
# 1.在项目根目录中执行如下命令:
vue run build
注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行
# 2.打包之后当前项目中变化
在打包之后项目中出现dist目录 dist目录就是vue脚手架项目生产目录或者说是直接部署目录(如下图所示：)
# 3.打包后的dist目录，可放入tomcat（放入bin文件内） 或 Nginx（nginx/html目录下)中 进行部署.
（1）在官网中下载apache-tomcat，版本较新即可，我本次使用的是【apache-tomcat-8.5.68】；
apache-tomcat下载网址：自行百度下载；不想下载的，可关注私信我，我私下发你呦。
（2）在Tomcat部署需要修改vue项目中的一些配置，才可正常访问；、
将config/index.js ==> dev/build 的assetsPublicPath: '/' 改为assetsPublicPath: './'
将src/router/index.js ==> base: '/my-first-vue/' 然后通过npm run build进行打包
（4）将打包后的dist文件夹内的static文件夹和index.html 放入 【apache-tomcat-8.5.68\webapps\my-first-vue】目录下；
（5）修改
【apache-tomcat-8.5.68\conf\server.xml】apache-tomcat的默认8080端口，改为8090 访问vue页面。
（6）打开
【apache-tomcat-8.5.68\bin\startup.bat】的startup.bat脚本，启动成功后，输入 http://localhost:8090/my-first-vue/index.html#/
（1）下载Nginx的文件：自行百度下载，【我使用的是 nginx-1.12.2】，可关注私信我，我私下发你呦。
（2）将dist打包文件放入【nginx-1.12.2\html】目录下即可
（3）注意：
配置【nginx-1.12.2\conf\nginx.conf】文件 listen 9000； server_name localhost; root D:\\PersionData\\top-creator\\2021-07-09\\nginx-1.12.2\\html\\dist; （4）配置如下图所示：
双击【nginx-1.12.2\nginx.exe】可执行程序，启动Nginx，打开浏览器输入：localhost:9000/#/
