在基本的java web工程中,WebContent目录存放了前端显示所需资源。所以VUE项目打包之后的内容也是放置在此处。
作为开发者,使用npm run dev来运行VUE项目,如果是用于打包,则使用npm run build来生成目标资源。
VUE项目中的config/index.js中包含了dev和build对应的参数。
npm run build将会在VUE根目录下生成dist目录,里面包含了index.html和static文件夹。
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
按照之前理解,将生成的dist文件夹放置到WebContent目录下,在java web工程构建之后就应该可以通过“原url/dist/”进行访问了。但是,我们在访问时会发现网页内容为空,如何解决呢?请检查下面三个问题。
- 路径依赖问题
我们放置的index.html和static文件夹在同一级目录下面,并且都没有放在java web工程的根目录下,所以需要修改build参数,即VUE项目中的config/index.js文件,将assetsPubicPath修改为相对路径。
- 路由配置问题
我在开发的时候,嫌弃VUE项目访问路径中的#号,所以在router配置中,设置成了history模式,但是,如果设置为history模式,则需要后端(即java web工程)进行一定的配合,可参考:https://router.vuejs.org/guide/essentials/history-mode.html,简单来说,就是在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是咱们app的依赖页面。
如果不想修改java web工程,则只能使用默认的hash模式。
其配置位于src/router/index.js:
const router = new VueRouter({
mode: 'history', //将该行删除
routes: [...]
})
- 解决图片等静态资源无法显示
这里可能存在两种情况:一种是静态资源CSS中使用图片作为背景图片使用,第二种是在JS中生成图片标签后,再设置图片路径。
这是因为图片的路径问题,这就导致了无法找到图片正确的路径。
需要更改build/utils.js文件中的ExtractTextPlugin的配置项: