servlet中使用vue-router history模式&前端配置记录

最新推荐文章于 2025-06-02 09:03:52 发布

dislido

最新推荐文章于 2025-06-02 09:03:52 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：编程笔记

本文链接：https://blog.csdn.net/dislido/article/details/78092976

编程笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个典型的前端项目部署结构及配置细节，包括Webpack构建流程、资源文件路径设置、错误页面处理等，并解决了资源路径相对引用导致的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录结构

- dist // webpack打包后的文件夹
| - bundle.js
  - // ...woff,ttf,svg等
- static // 图片等资源文件夹
- WEB-INF
  - lib
  - web.xml
- index.jsp // 主页

index.jsp

<%@page pageEncoding="utf-8" %>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>

<!-- ... -->

<script src="./dist/bundle.js"></script>
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <error-page>
        <error-code>404</error-code>
        <location>/index.jsp</location>
    </error-page>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>/dist/*</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>/static/*</url-pattern>
    </servlet-mapping>
</web-app>

踩坑/解决方案

资源使用`/`开头

<script src="./dist/bundle.js"></script>
./开始的路径以当前地址开始，当访问127.0.0.1:8080/foo/bar时上面的路径就会指向127.0.0.1:8080/foo/dist/bundle.js而找不到文件，其他资源同理
修改为<script src="/dist/bundle.js"></script>
/开头路径固定以根目录为起点，即从127.0.0.1/开始，这样在任何路径下都匹配到127.0.0.1:8080/dist/bundle.js

前端配置

package.json

{
  "name": "shop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lint": "eslint **/*.js",
    "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",
    "lint-fix": "eslint --fix **/*.js",
    "build": "webpack",
    "buildp": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "bootstrap": "^3.3.7",
    "css-loader": "^0.28.7",
    "eslint": "^4.7.1",
    "eslint-config-airbnb-base": "^12.0.0",
    "eslint-plugin-import": "^2.7.0",
    "file-loader": "^0.11.2",
    "jquery": "^1.12.4",
    "style-loader": "^0.18.2",
    "vue": "^2.4.4",
    "vue-loader": "^13.0.5",
    "vue-router": "^2.7.0",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0"
  }
}

.eslintrc.json

{
  "extends": "airbnb-base",
  "rules": {
    "no-console": "off"
  }
}

.babelrc

{
  "presets": ['env']
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    publicPath: '/dist/',
    path: path.resolve(__dirname, '../web/dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader',
        ],
      },
      {
        test: /\.svg$/,
        use: [
          'file-loader',
        ],
      },
      {
        test: /\.vue$/,
        use: [
          'vue-loader',
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: ['env'] },
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js',
    },
  },
};