小编Dan*_*jay的帖子

我正在尝试将一些环境变量添加到我的vue应用程序中.

这是我的.env文件的内容,放在root(外部src):

VUE_APP_GOODREADS_KEY = my_key

我在我的顶部添加了dot env的代码 main.js

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
import Vuetify from 'vuetify'

import dotenv from 'dotenv'

dotenv.config()

import { router } from './router'
import store from './store'

我想在我的商店中使用这个变量 ./store/index.js

我尝试在商店中的console.log环境变量,但没有运气:

console.log(process.env)

但我得到的只是

NODE_ENV:"development"

我发现只有相关的线程是将环境变量加载到vue.js中,但它只提到了如何使用现有的变量process.env.我想使用dotenv添加环境变量.为什么这段代码不起作用？

我正在尝试将蛇形中的字符串转换为正常情况（例如：“hello_world”到“Hello world”）

我对 ruby​​ 很陌生，我正在将它与 Rails 一起使用。我发现这个问题Converting string from snake_case to CamelCase in Ruby，似乎有一个用于该用例 ( .camelize)的函数。有什么我可以使用内置的吗？如果没有，我怎样才能做到这一点？

我正在尝试使用Netlify Lambda Function创建 API 端点。该代码在我的本地运行良好，但总是返回Access to XMLHttpRequest at 'https://<my-netlify-project>.netlify.com/.netlify/functions/submit' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我正在尝试在我的代码中处理OPTIONS和POST，但它似乎不起作用。这是我的代码：

const axios = require('axios');

const headers = {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
      'Content-Type': 'application/json',
      'Access-Control-Allow-Methods': '*',
      'Access-Control-Max-Age': 2592000,
      'Access-Control-Allow-Credentials': true,
};

exports.handler = (event, context, callback) => {
      if (event.httpMethod === 'OPTIONS') { …

我想添加一个清除按钮以方便用户：

constructor(props) {
    this.emailInput = React.createRef();
}

<Field label="Email" name="email" ref={this.emailInput} onChange={onChange} component={TextField}/>

但是得到这个：

Warning: Function components cannot be given refs. Attempts to access this ref will fail.

我遵循了很多有关如何减小捆绑包大小的教程，但是对捆绑包大小没有任何影响，我也不知道为什么。

每当我将一些新代码添加到webpack时，我的捆绑包大小都与以前相同。

（我的应用程序是使用vue cli 3 pwa插件，webpack等构建的）

如果我运行npm run build，则会得到以下输出：

webpack.config.js：

    const path = require('path');
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    const OfflinePlugin = require('offline-plugin');
    const webpack = require('webpack');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const WebpackChunkHash = require('webpack-chunk-hash');
    const CompressionPlugin = require('compression-webpack-plugin');

    if (process.env.NODE_ENV === 'production') {
        module.exports.plugins = (module.exports.plugins || []).concat([
            // or use push because it's faster
            new webpack.DefinePlugin({
                'process.env': {
                    'process.env.NODE_ENV': '"production"',
                },
            }),
            new webpack.optimize.UglifyJsPlugin({
                mangle: true,
                compress: {
                    warnings: false, // Suppress uglification warnings
                    pure_getters: true,
                    unsafe: …

我正在使用react-select和formik使用自动填充文本框构建表单。

<Formik
    initialValues={{
        assignedTo: task.assignedTo,
    }}
    onSubmit={(values) => {
        const updatedTask = { ...task, ...values };
        editTask(updatedTask);
    }}
    render={({ handleSubmit, handleChange, values }) => (
        <form>
            <Select type="text" name="assignedTo" options={options} onChange={handleChange} value={{ value: task.assignedTo, label: task.assignedTo }} />
        </form>
    })
/>

引发错误 Cannot read property 'type' of undefined

如何解决此问题并在Formik中处理react-select？