htaccess for routing #2054

build/webpack.config.base.js

@@ -74,10 +74,12 @@ module.exports = {
     }),
     new HtmlWebpackHarddiskPlugin(),
     new VueLoaderPlugin(),
-    new CopyWebpackPlugin([{
-      from: utils.resolve('static/img'),
-      to: utils.resolve('dist/static/img'),
-      toType: 'dir'
-    }])
+    new CopyWebpackPlugin([
+      {
+        from: utils.resolve('static/img'),
+        to: utils.resolve('dist/static/img'),
+        toType: 'dir'
+      }
+    ])
   ]
 }

build/webpack.config.prod.js

@@ -1,16 +1,24 @@
 'use strict'
 
 const webpack = require('webpack')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 const merge = require('webpack-merge')
 const baseConfig = require('./webpack.config.base')
 const MiniCssExtractPlugin  = require('mini-css-extract-plugin')
 
+const utils = require('./utils')
+
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
 // ERROR in vendor.js from UglifyJs
 // RangeError: Maximum call stack size exceeded
 
 module.exports = merge(baseConfig, {
   mode: 'production',
+  // resolve: {
+  //   alias: {
+  //     'static': utils.resolve('static')
+  //   }
+  // },
   output: {
     publicPath: '/'
   },
@@ -66,6 +74,11 @@ module.exports = merge(baseConfig, {
     }),
     new webpack.DefinePlugin({
       "process.env": "'prod'"
-    })
+    }),
+    new CopyWebpackPlugin([{
+      from: utils.resolve('static/.htaccess'),
+      to: utils.resolve('dist/.htaccess'),
+      toType: 'file'
+    }])
   ]
 })

static/.htaccess

@@ -0,0 +1,11 @@
+<IfModule mod_negotiation.c>
+  Options -MultiViews
+</IfModule>
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>