Vue部署到相对目录和解决刷新404的问题

部署到相对目录

router.js的配置

Vue.use(Router)
// 获得相对路径的方法
function getAbsolutePath () {
  let path = location.pathname
  return path.substring(0, path.lastIndexOf('/') + 1)
}
export default new Router({
  // 配置base路径
  base: getAbsolutePath(),
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'index',
      redirect: '/sample'
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    }
  ],
  linkActiveClass: 'active'
})

config/config.js的配置

  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // 修改assetsPublicPath配置相对路径
    assetsPublicPath: '/',
    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
  },

解决刷新404的问题

使用apache2的配置

开启rewrite模块
sudo a2enmod rewrite
修改sites-enable下的配置文件

<VirtualHost *:80>
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html
        <Directory /var/www/html>
                Order deny,allow
                Allow from all
                AllowOverride all
        </Directory>
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

在网页根目录下添加.htaccess文件

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

重启服务器后即可

可参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html