您的位置：首页 > 产品设计 > UI/UE

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

2017-09-26 11:01 531 查看

目录结构

- 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="./di
a8de
st/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',
},
},
};
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航