feat: 解决自动导入页面的 bug

Author: FairyEver

package.json

@@ -16,6 +16,7 @@
     "vuex": "^3.1.3"
   },
   "devDependencies": {
+    "@d2-projects/vue-filename-injector": "^1.1.1",
     "@vue/cli-plugin-babel": "^4.3.0",
     "@vue/cli-plugin-eslint": "^4.3.0",
     "@vue/cli-plugin-router": "^4.3.0",

src/router/index.js

@@ -10,7 +10,7 @@ const views = []
 const vueFiles = require.context('@/views', true, /page\.vue$/)
 vueFiles.keys().forEach(key => {
   const component = vueFiles(key).default
-  const routePath = path.dirname(component.__file).replace(/^src\/views\//, '')
+  const routePath = path.dirname(component.__source).replace(/^src\/views\//, '')
   const routeName = routePath.replace(path.sep, '-')
   views.push({
     name: routeName,

vue.config.js

@@ -1,3 +1,5 @@
+const VueFilenameInjector = require('@d2-projects/vue-filename-injector')
+
 const publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
 
 module.exports = {
@@ -11,5 +13,10 @@ module.exports = {
         prependData: `@import '~@/assets/style/public.scss';`
       }
     }
+  },
+  chainWebpack: config => {
+    VueFilenameInjector(config, {
+      propName: '__source'
+    })
   }
 }

yarn.lock

@@ -824,6 +824,13 @@
     resolve-from "^5.0.0"
     resolve-global "^1.0.0"
 
+"@d2-projects/vue-filename-injector@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@d2-projects/vue-filename-injector/-/vue-filename-injector-1.1.1.tgz#699ce81a17d6b3b2fbacf62fa76d37f57f939f89"
+  integrity sha512-zR93EYjtk0pqcZGWTWZKtpB2HpHnmt7E4ysl8owUsD+pIyNK+2bXvhEiKGTgpnHFm+c/LzNdBrTUaQUgAKRLrQ==
+  dependencies:
+    loader-utils "^1.4.0"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.npm.taobao.org/@hapi/address/download/@hapi/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"