npm build（nuxt build）不会使用 nuxt spa 模式在放大（aws codebuild）中创建 dist 文件夹答案

【问题标题】：npm build (nuxt build) does not create dist folder in amplify(aws codebuild) using nuxt spa modenpm build（nuxt build）不会使用 nuxt spa 模式在放大（aws codebuild）中创建 dist 文件夹
【发布时间】：2019-08-20 01:51:45
【问题描述】：

我想在 amplify 中运行 'npm build'(nuxt build) 后创建 dist 文件夹。

我在我的 local(mac) 中运行 npm build，然后创建 dist 文件夹。

我在 'npm build' 之后运行 'ls -a' ，然后 dist 文件夹在 amplify 中不存在。

                                 > nuxt build
2019-08-20T01:49:08.598Z [INFO]: # Executing command: ls -a
2019-08-20T01:49:08.602Z [INFO]: .
                                 ..
                                 amplify.sh
                                 amplify.yml
                                 assets
                                 components
                                 .editorconfig
                                 .eslintrc.js
                                 .git
                                 .gitignore
                                 layouts
                                 middleware
                                 node_modules
                                 .nuxt
                                 nuxt.config.js
                                 package.json
                                 package-lock.json
                                 pages
                                 plugins
                                 .prettierrc
                                 README.md
                                 static
                                 store
                                 .vscode
                                 yarn.lock
                                 # Completed phase: build

这里是 package.json

    {
        ...
        "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
        "precommit": "npm run lint"
      },

这里是 amplify.yml

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build 
        - ls -a
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory:
        dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

等待您的答复，谢谢。

【问题讨论】：

这是真的。你有 .nuxt 代替。您将利用它来构建您的应用程序。
@Ohgodwhy 感谢您的回复。但据我了解，.nuxt 用于 SSR。这是错的吗？我尝试使用 .nuxt/dist/server/index.spa.html ，但效果不佳。
因为所有.js 和.css 文件的路径都不正确，所以不能正常工作。您需要根据 Web 服务器期望提供的内容来映射它们。
我试过'npm run generate'，但它没有创建dist文件夹..
@Ohgodwhy 我 google 'nuxt codebuild' 等等，但我找不到使用 .nuxt 文件夹的教程或答案，我只能找到使用 'dist' 文件夹的方法。你知道一些好的教程或代码来使用 .nuxt 吗？

标签： vue.js single-page-application nuxt.js aws-amplify aws-codebuild

【解决方案1】：

来自 Nuxt 文档：https://nuxtjs.org/docs/2.x/directory-structure/dist

dist 文件夹，分发文件夹的简称。它是在使用 nuxt generate 命令时动态生成的，并且包含部署和运行静态生成的 Nuxt.js 应用程序所需的生成的生产就绪 HTML 文件和资产。

将 - npm run generate 添加到您的放大构建命令中将解决此问题

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run generate
        - npm run build
  artifacts:
    baseDirectory: dist
  ...

【讨论】：

【解决方案2】：

我通过设置 amplify.yml 文件解决了这个问题。我将baseDirectory: dist 更改为baseDirectory: .nuxt。

【讨论】：