vue的HTML5 History 模式

vue的HTML5 History 模式
一：在根目录下配置

1、前端路由配置

//并且配置路由器规则
const routes =[
{
path: '*', redirect: '/index',
},
];
const router = new VueRouter({
linkActiveClass: 'active',
mode:'history',
routes
});

2、后端配置例子

Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx

location / {
try_files $uri $uri/ /index.html;
}

一：在不是根目录下配置
1、在config文件里的index.js中配置生成目录的文件路径，把 assetsPublicPath: './'改成 assetsPublicPath: '/wfx/',（其中wfx是在根目录下的文件）

build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/wfx/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},

2、前端路由配置（其中base: '/wfx/'是根目录的路径入口：如生成：localhost:8080/wfx/index）

const routes =[
{
path: '*', redirect: '/index',
},
];
const router = new VueRouter({
linkActiveClass: 'active',
mode:'history',
base: '/wfx/',
routes
});

3、后端配置例子

Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx

location / {
try_files $uri $uri/ /index.html;
}

参考文献：https://router.vuejs.org/zh-cn/essentials/history-mode.html