npm build(nuxt build)不使用nuxt spa模式在amplify(aws codebuild)中创建dist文件夹

时间:2019-08-20 01:51:45

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

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

我在本地(mac)中运行npm build,然后创建dist文件夹。

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

                                 > 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/**/*

我在等待您的回答,谢谢。

2 个答案:

答案 0 :(得分:1)

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

<块引用>

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

- npm run generate 包含到您的 amplify 构建命令中将解决此问题

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

答案 1 :(得分:0)

我解决了它,设置了amplify.yml文件。我将export default () => { const [preview, setPreview] = useState(null); const fileHandler = evt => { const f = evt.target.files[0]; if (f) { const reader = new FileReader(); reader.onload = ({ target: { result } }) => { setPreview(result); }; reader.readAsDataURL(f); // you can read image file as DataURL like this. } else { setPreview(null); } }; return ( <div> <input type="file" accept="image/*" onChange={fileHandler} /> { preview && <img src={preview} /> } </div>); } 更改为baseDirectory: dist