vue的HTML5 History 模式

vue的HTML5 History 模式

一：在根目录下配置

1、前端路由配置

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

2、后端配置例子

Apache

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

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

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

nginx

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

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