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

Question

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

这是公用的模块

在mian.js引入该模块

在其页面使用时

就报错了

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

自己打断点看

Answer 4

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

Answer 5

使用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