广告设计与制作培训机构,深圳网站建设zhaoseo,网络营销推广专员,青岛做网站建网站今天在公司项目中看到一个非常有趣的导入路径 crud 先是一蒙 这是个啥 突然想起一个被自己遗漏的知识点 在vue.config.js中配置路径指向
这里 我们随便找一个vue项目 在src下找到 components 目录 如果没有就创建一个 下面找到HelloWorld.vue 如果没有也是自己创建一个就好 然…今天在公司项目中看到一个非常有趣的导入路径 crud 先是一蒙 这是个啥 突然想起一个被自己遗漏的知识点 在vue.config.js中配置路径指向
这里 我们随便找一个vue项目 在src下找到 components 目录 如果没有就创建一个 下面找到HelloWorld.vue 如果没有也是自己创建一个就好 然后 HelloWorld.vue 编写代码如下
templatediv classhello代理组件/div
/templatescript
export default {
}
/scriptstyle scoped
/style然后 在项目根目录下找到 vue.config.js 如果没有就手动建一个 然后 我的代码是这样的
const { defineConfig } require(vue/cli-service)
const path require(path)module.exports defineConfig({transpileDependencies: true,chainWebpack: config {config.resolve.alias.set(, path.resolve(__dirname, src))config.resolve.alias.set(com, path.resolve(__dirname, src/components))}
})其实最重要的是
chainWebpack: config {config.resolve.alias.set(, path.resolve(__dirname, src))config.resolve.alias.set(com, path.resolve(__dirname, src/components))
}声明在 module.exports 里面就可以了 首先第一个配置 指向 src目录 然后 我们自己配了一个com 指向src下的components目录 然后 我们在 App.vue编写代码如下
templatedivHelloWorld//div
/templatescript langjsx
import HelloWorld from com/HelloWorld;
export default {components: {HelloWorld},data() {return {};},methods: {},
};
/script我们尝试通过自己配置的com 引入HelloWorld组件 启动项目 效果如下 可以看到 我们组件也是很顺利的展示在了界面上
