支持显示svg, 添加svg-sprite-loader

package.json

@@ -34,6 +34,7 @@
     "lint-staged": "^9.5.0",
     "sass": "^1.23.7",
     "sass-loader": "^8.0.0",
+    "svg-sprite-loader": "^4.1.6",
     "typescript": "~3.5.3",
     "vue-template-compiler": "^2.6.10"
   },

src/components/BottomLayout.vue

@@ -24,5 +24,6 @@
   .view {
     flex-grow: 1;
     border: 1px solid #000;
+    overflow: auto;
   }
 </style>

src/shims-vue.d.ts

@@ -1,4 +1,9 @@
 declare module '*.vue' {
-  import Vue from 'vue'
+  import Vue from "vue"
   export default Vue
 }
+
+declare module "*.svg" {
+  const content: string
+  export default content
+}

src/views/Money.vue

@@ -1,9 +1,13 @@
 <template>
-  <BottomLayout>money</BottomLayout>
+  <BottomLayout>
+    <p>money</p>
+  </BottomLayout>
 </template>
 
 <script lang="ts">
+  import x from "@/assets/icons/edit.svg"
 
+  console.log(x)
   export default {
     name: "Money",
   }

vue.config.js

@@ -1,3 +1,16 @@
+const path = require("path")
+
 module.exports = {
-  lintOnSave: false
-}
+	lintOnSave: false,
+	chainWebpack: config => {
+		const dir = path.resolve(__dirname, "src/assets/icons")
+
+		config.module
+			.rule("svg-sprite")
+			.test(/\.svg$/)
+			.include.add(dir).end() // 包含 icons 目录
+			.use("svg-sprite-loader").loader("svg-sprite-loader").options({extract: false}).end()
+		config.plugin("svg-sprite").use(require("svg-sprite-loader/plugin"), [{plainSprite: true}])
+		config.module.rule("svg").exclude.add(dir) // 其他 svg loader 排除 icons 目录
+	}
+}