您的当前位置：首页正文

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

来源：爱go旅游网

目录结构

- 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>

踩坑/解决方案

资源使用`/`开头

前端配置

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',
    },
  },
};

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

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

目录结构

踩坑/解决方案

资源使用/开头

前端配置

资源使用`/`开头