javascript - 将适用于 Javascript 的 AWS 开发工具包与 Vue.js 2.0 结合使用

Question

我正在使用 Vue.Js 访问由 AWS API Gateway 托管的 API。

这里有一些很好的说明 http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-generate-sdk-javascript.html .

我有一堆不同的组件，每个组件都会从不同的 API GET 调用中获取数据。最初我尝试将所有脚本文件添加到我的 index.html 并执行以下操作:

RetailerDetails.vue:

<script>

export default {
    name: 'RetailerDetails',
    mounted() {
        var apigClient = apigClientFactory.newClient({
            accessKey: 'blah',
            secretKey: 'blah',
        });

        apigClient.businessGet = function (params, body, additionalParams) {
            if (additionalParams === undefined) { additionalParams = {}; }

            apiGateway.core.utils.assertParametersDefined(params, [], ['body']);

            var businessGetRequest = {
                verb: 'get'.toUpperCase(),
                path: pathComponent + uritemplate('/business').expand(apiGateway.core.utils.parseParametersToObject(params, [])),
                headers: apiGateway.core.utils.parseParametersToObject(params, []),
                queryParams: apiGateway.core.utils.parseParametersToObject(params, []),
                body: body
            };

            return apiGatewayClient.makeRequest(businessGetRequest, authType, additionalParams, config.apiKey);
        };
    },
}

那没有用，我收到 ReferenceError: apigClientFactory is not defined。

然后我尝试从我的 index.html 中取出脚本标签并将以下行添加到我的组件中:

require('../assets/js/lib/axios/dist/axios.standalone.js');
require('../assets/js/lib/CryptoJS/rollups/hmac-sha256.js');
require('../assets/js/lib/CryptoJS/rollups/sha256.js');
require('../assets/js/lib/CryptoJS/components/hmac.js');
require('../assets/js/lib/CryptoJS/components/enc-base64.js');
require('../assets/js/lib/url-template/url-template.js');
require('../assets/js/lib/apiGatewayCore/sigV4Client.js');
require('../assets/js/lib/apiGatewayCore/apiGatewayClient.js');
require('../assets/js/lib/apiGatewayCore/simpleHttpClient.js');
require('../assets/js/lib/apiGatewayCore/utils.js');   
require('../assets/js/custom/apigClient.js');

这也不起作用，现在我得到 ReferenceError: Can't find variable: CryptoJS

据我了解，这是因为我没有正确引用文件吗？

我需要做什么？

Answer 1

不要将 javascript 文件放在 assets 文件夹中。而是将它们放在静态文件夹中。如果您使用的是 CLI 安装，Webpack 会对 Assets 进行分类并处理图像和字体之类的事情，但不会处理 javascript 文件。

当我将文件放在 /static/ 或类似 /static/js/ 的地方，然后将它们带入时:

<script type="text/javascript" src="/static/apigClient.js"></script>

我的 Vue 组件可以使用这些功能。也许有更好的方法不会污染全局命名空间，但这是一个非常简单的解决方案(假设它也适用于您)。