vue项目部署到Tomcat方法

将 Vue 项目部署到 Tomcat 的方法

1. Vue项目路由配置
项目上线，一般需要添加项目名，并且消去vue-router产生的#号，需要在router的配置下，在本项目是router->index.js下配置：

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);

export default new Router({
  /** 添加以下代码 */
  base: "/my_app/", //项目名称 访问路由页面都需要加上这个,访问的根路径为http://ip:port/my_app
  mode: "history", //消去#
  /** 添加上述代码 结束 */ 
  routes: []
})

2. 修改 config -> index.js文件，注意两处都需要修改

module.exports = {
	dev: {
		// Paths
    	assetsSubDirectory: 'static',
    	// assetsPublicPath: '/',
    	/** 修改如下代码 */
    	assetsPublicPath:'./',
    	/** 修改代码 结束 */
	},
	build: {
		// Template for index.html
    	index: path.resolve(__dirname, '../dist/index.html'),
    	// Paths
    	assetsRoot: path.resolve(__dirname, '../dist'),
    	assetsSubDirectory: 'static',
    	// assetsPublicPath: '/',
    	/** 修改如下代码 */
    	assetsPublicPath:'./',
    	/** 修改代码 结束 */
	}
}

3. Vue项目配置完毕
到这一步基本上就配置完成了，然后执行 npm run build ，会发现项目有一个 dist文件夹，该文件夹下包含以下信息：

然后找到自己的 Tomcat下的webapps文件夹，在里面新建一个空白文件夹，名字就是我们第一步操作配置的根路径名称，我这里是 my_app。

接着将dist文件下的内容全部复制，然后放在my_app文件夹下。

4. 打开Tomcat服务器，通过 localhost:8080/my_app ，就可以看到自己的项目啦