在Vue-cli + Webpack中导入静态.js

Question

从一段时间以来，我一直在使用vue-cli，但仍然没有完全了解文件加载的方式。从现在开始，我已经阅读了文档和一些博客，并帮助我进行了处理。

我想在组件中导入带有某些常量的静态.js文件。我不希望在部署时将它们捆绑在一起，这样就可以在需要时直接在服务器中轻松找到和更改它们，而不必重建整个项目。

我试图将它们放在/public/constants/foo.js目录中，并以不同的方式使用绝对路径指向它们

import FOO from '/constants/foo.js';  // Not working

const FOO = require('/constants/foo.js');  // Not working

我该如何实现？

Answer 1

如果我理解得很好，您的项目架构就像

/root
  |__/public
  |     |__/img
  |     |__/css
  |     |__/constants
  |            |__/foo.js
  |            |__/bar.js
  |__/webpack.config.js

在您的webpack.config.js中创建一个新条目，例如

module.exports = {
  entry: './public/index.js'
};

然后在您的公共目录中创建一个index.js文件，并导入您的foo.js

import foo from './constants/foo';

当然，您的foo.js应该导出类似的内容

export default function foo() {
  //
}

希望对您有帮助。