在 Snowpack Vue 应用程序中更改默认目录答案

【问题标题】：Change default directory in Snowpack Vue app在 Snowpack Vue 应用程序中更改默认目录
【发布时间】：2021-05-08 22:17:27
【问题描述】：

我想在我的 Vue 3 应用程序中使用 Snowpack。目前，我已经使用以下命令初始化了 Vue 3 应用程序：

npx create-snowpack-app my-app --template @snowpack/app-template-vue

默认情况下，Snowpack 会创建如下目录结构：

public/
src/
  App.vue
  index.js
package.json
README.md
snowpack.config.js

我需要稍微重组一下。我将现有应用程序移至 Snowpack 的原因。我的挑战是我需要迁移到这样的结构：

public/
pages/
  App.vue
index.js
package.json
README.md
snowpack.config.js

简而言之：1) 将 src 重命名为 pages 和 2) 将 index.js 移动到与 package.json 相同的级别。当我进行此更改时，Snowpack 会抛出一条警告说“安装的目录不存在”。它打印出它正在寻找的文件，Snowpack 显然仍在src 目录中查找。我的想法是查看snowpack.config.js 文件。

我查看了snowpack.config.js 文件中的mount property。我将mount.src.url 更改为/pages。然而，这并没有奏效。我还尝试将属性更改为 /，但也没有用。

我需要更改什么来告诉 Snowpack 在当前目录中而不是在 src 目录中查找 index.js 文件？

【问题讨论】：

那个不行？ mount: { url: '/pages' }
@kissu - 不。我怀疑这与我将index.js 上移了一个目录有关。我相信我需要更新一些配置来说明index.js 的位置。但是，我不知道需要哪个配置选项。

标签： vue.js snowpack

【解决方案1】：

该目录布局可以通过将. 指定为挂载点的mount 配置实现：

// snowpack.config.js
module.exports = {
  mount: {
    '.': {url: '/dist'}
  },
}

然后根索引可以从<projectRoot>/pages/导入SFC：

// <projectRoot>/index.js
import App from './pages/App.vue'
...

【讨论】：