vue项目部署到tomcat踩的坑

vue-router路由的使用

PS ： 标签 必须 必须 必须 使用 不能使用其它标签跳转，否则将无法跳转到vue前端的正常路由路径，会被解析成后台接口路径，然后报404。

关于vue项目部署到tomcat

在tomcat的webapps下创建项目名称文件夹，例如 ：demo
vue项目在打包前需要修改配置

1. config/index.js

build{
	assetsPublicPath: '/demo/',//与项目名一致
}

2. router/index.js

export default new Router({
	mode: 'history',//去除链接中出现#
	base: '/demo/',//与项目名一致，也是访问的根路由
	routes: []
})

3. build/utils.js

if (options.extract) {
     return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' //添加，如果没有，自己引用的图片或者样式可能不显示
     })
} else {
     return ['vue-style-loader'].concat(loaders)
}

4. npm run build 项目打包
5. vue项目打包，打包完成后将dist文件加下的static文件夹和index.html文件复制到tomcat里webapps下新建的demo文件夹里
6. 启动tomcat 访问链接 http://localhost:8080/demo