小编Dyl*_*yen的帖子

我已经尝试了所有解决方案，但似乎没有一种适合我。我只想将一些值存储.env在Vue应用程序内的文件中，但仅尝试记录即可process.env从组件内部返回一个空对象。

我的.env档案

VUE_APP_URL={api url}
VUE_APP_TOKEN={token}

我的计划是将这些环境变量设置为数据属性，但它总是返回undefined。如果我console.log(process.env.NODE_ENV)从webpack.config.js中进行操作，它将显示我正在开发中，但是如果我尝试从类似组件的内部进行操作，

mounted() {
    this.$nextTick(() => {
      console.log(process.env.VUE_APP_URL);
    })
  }

它只是返回undefined。

nextjs 文档 ( https://nextjs.org/docs/basic-features/static-file-serving ) 声明在public目录下添加图像文件路径。

我有一个渲染图像组件的组件，该文件在我的 nextjs 项目上正确渲染，但不在故事书内渲染。图像文件当前位于public/images/

const renderImage = () => {
    const portraitClassName = cx({
        [styles.imageContainerPortrait]: true,
    });

    return (
        <img
            className={portraitClassName}
            data-testid="image"
            src="/images/portrait.png"
            alt={image.imgAlt}
        />
    );
};

这是我当前的故事书配置文件

webpackFinal: async (config) => {
        config.module.rules.push({
            test: /\.(scss|sass|css)$/,
            use: [
                {
                    loader: "sass-loader",
                    options: {
                        implementation: require("sass"),
                    },
                },
                {
                    loader: "postcss-loader",
                    options: {
                        ident: "postcss",
                        plugins: [tailwindcss, autoprefixer],
                    },
                }
            ],
            include: path.resolve(__dirname, "../"),
        });
        return config;
    }

是否缺少某些东西可以让我以与 Nextjs 的设置方式相同的方式渲染图像？

我有这些可点击的图块，同时将用户发送到某个外部页面，以及图块内部的一个按钮，该按钮应将用户路由到网站内的某个页面。这样做的问题是，当单击按钮时，两个事件都会被触发，因此它将用户发送到外部页面+导航到内部页面。

<div
  tabIndex={0}
  role="button"
  onClick={onClick}
>
  <div>
    // some markup
    <Link href={url} passHref>
      <a
        role="button"
        onClick={(e) => sendUserToInternalPageEvent(e)}
      >
        // some text
      </a>
    </Link>
  </div>
</div>

该事件sendUserToInternalPageEvent使用 Link 组件的 nextjs 事件对象。我试图停止传播sendUserToInternalPageEvent但event.stopPropagation()未定义。目标是sendUserToInternalPageEvent在使用 nextjs Link 元素时将用户发送到内部页面，并将onClick用户发送到外部页面。

我正在尝试查找使用的商店列表.where，但我也试图将它们排序为相同的 id 数组。

IE

  ids = ["4", "15", "10", "20", "1"]
  stores = Store.published.where(id: ids)

看起来商店是按 id 的升序返回的，就像这样 [{id: 20}, {id: 15} {id: 10}, {id: 4}, {id: 1}]。我希望按照与ids订购方式相同的方式对退回的商店进行订购。另请注意，每个商店中的 id 都是整数，而数组中的 idids是字符串。