非专业前端的Vue，webpack 生产环境部署Tomcat

vue 部署到tomcat，需要打包，这里有个注意点：打包完成后的dist文件夹里面的static 和index.html才是我们需要的资源。

具体步骤：

1：vue打包前的准备：配置项的修改

2：打包放到tomcat

3：启动tomcat：

vue的配置项：包含了路由的配置，还有静态资源的配置，路径的配置

1：项目目录下的 config/index.js，折叠后看到有两个map。我们需要修改第二个build里面的内容：

修改assetsPublicPath的属性值："/" ===> "./" 由绝对路径改为当前路径

 

配置路由文件：新加base属性，这个跟你即将放在tomcat里面的项目名保持一致：

 

 3：vue打包：当前目录下运行 npm run build。完成之后会生成一个dist文件。里面包含了static 和index.html 

 

拷贝这个文件夹到tomcat ==》 webapps 目录下：

还及得之前 我们路由中添加的base属性吗？把这个dist改名，改成base的属性值：VueTest

 

 

 最后的Tomcat目录结构就是这个样子：

然后 进入 Tomcat Bin目录，启动tomcat：

 

然后打开浏览器，就能访问到项目了。（这里图标或者，图片等静态资源无法显示，需要修改配置，如下下图）

 静态资源 css 等无法加载：找到这个位置，改成如图所示属性。