关于vue自定义模块引入报错问题

gethin
  • 130

首先自己写了一个url模块,就是只要域名改动,就在这个url.js去修改,一般有ajax请求的地方都要引入这模块,所以我就觉得很麻烦,所以我想在总路口引入,但是会报错。

clipboard.png
这是公用的模块

在mian.js引入该模块

clipboard.png

在其页面使用时

clipboard.png

就报错了

clipboard.png

现在我的解决方案就是在每个使用ajax的页面中
都引入

import data from 'XXX/config/url.js'

求大神告知更好的解决方案

回复
阅读 6.1k
5 个回答

在 main.js 引入 data,那么 data 就属于 main.js 的局部变量,其它模块当然访问不到。
要让所有模块共享 data 属性,第一可以用全局变量,第二可以尝试 vue 的 mixin

keep DRY,尽量少写重复性代码,每个文件都引用不是一个好的做法

没有全局引入啊,你只是在引入。

自己打断点看

在main.js定义全局函数
window.data = data

使用webpack的DefinePlugin插件

  1. 修改build/webpack.dev.conf.js的

    new webpack.DefinePlugin({
          'process.env': config.dev.env
        })

    new webpack.DefinePlugin({
      'process.env': config.dev.env,
      'data': require('./url')  // 你的模块
    })
  2. 在你自己的url模块中, 修改为

    module.exports = {
      url: 'http://192.168.0.61/app/'
    }
  3. *.vue中直接使用data
宣传栏