vue 不识别svg,Vue.js如何导入SVG徽标

I'm new to vue.js and am used to React. I'm currently trying to import an SVG logo into my header component but I'm not sure how. In react, I would simply do import Logo from './path; and use Logo wherever I needed it within the current component. This is basically what I'm attempting to do right now but I keep getting errors. Could anyone tell me how this could be done in Vue.js?

import Logo from '../assets/76_logo.svg';

export default {

name: 'Header'

}

解决方案

Here are three options. The best in my opinion is the third:

Simply input src like in any webpage

Check out svg-vue-loader. Vue won't automatically import svg without a loader.

Just paste it in! (Open the svg file and copy paste it into the template.) The best option in my opinion, especially when prototyping or for smaller projects. Like so:

If that would make it too crowded later on, just make a new component, call it say Logo, and paste svg in there and then import MainLogo component into your header.

No need for svg-loaders. Though loaders are a dev dependency, so not like it would cost you anyway; they would just do the same thing you can do manually.

// in MainLogo.vue

// in MainHeader.vue

import MainLogo from '../path/to/file.vue'

export default {

components: { MainLogo }

}

Cheers