vue使用@路径引入 |
您所在的位置：网站首页 › 项目导入是什么意思 › vue使用@路径引入 |
vue使用@路径引入
|
vue使用@路径引入，这个在项目中很常见； 项目中使用引入文件有时候路径比较深，需要使用"../../../xx.js"这种类似的路劲引入，这种方式比较笨，可以使用webpack的别名alias配置来解决。 首先，先确定项目中是否有path模块： （1）vue-cli1，vue-cli2搭建的项目 以下为vue.config.js配置 const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { chainWebpack: config => { config.resolve.alias .set("@", resolve("src")) .set("assets", resolve("src/assets")) .set("components", resolve("src/components")) .set("base", resolve("baseConfig")) .set("public", resolve("public")); }, }（2）webpack3,4的写法 这个@是在 webpack.base.conf.js 文件里配置的，找到下面这段话 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/胜利ue.esm.js', '@': resolve('src'), } },（3）vue-cli3搭建的项目 以下为vue.config.js配置 publicPath: '/asset/baigei2020/alipay_act', outputDir: '../../../public/asset/baigei2020/alipay_act', assetsDir: 'static', productionSourceMap: false, devServer: { port: 3002, open: true, overlay: { warnings: false, errors: true }, proxy: { '/api': { target: 'http://mayouchen.test.com/', changeOrigin: true, pathRewrite: { '^/api': '' }, cookieDomainRewrite: { '*': 'localhost' } } } //after: require('./mock/mock-server.js') }, configureWebpack: { resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), '~': process.cwd(), public: resolve('public'), components: resolve('src/components'), util: resolve('src/utils'), store: resolve('src/store'), router: resolve('src/router') } } }, transpileDependencies: [ '[email protected]@ant-design-vue', 'ant-design-vue' ],根据上面配置实例演示：
|
如果没有path模块需要先安装path
【本文地址】
今日新闻 |
推荐新闻 |