nuxt.js-静态项目:一页在生产中不可访问

发布于 2025-02-13 18:05:00 字数 5122 浏览 0 评论 0原文

我更新了我的NUXT网站项目(静态项目)。

在此新版本中:

  • 我更新了NUXT版本,并
  • 编辑了NUXT配置的
  • 依赖项,当我在本地使用NUXT DEV时,添加了一个新功能

,该网站正常工作。

当我运行Docker容器以进行生产部署时, /Legal URL不起作用。

如果我编写法律URL,则页面重新加载并返回状态代码200

由于这个新版本,此问题才存在。

如果我回到上一个版本,则可以在生产中访问/Legal页面。

旧软件包.json

{
  "name": "site_name",
  "version": "site_version",
  "description": "site_description",
  "author": "site_author",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "test": "jest",
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/dotenv": "^1.4.1",
    "bootstrap": "^4.1.3",
    "bootstrap-vue": "^2.15.0",
    "jquery": "^1.9.1",
    "marked": "^0.6.3",
    "nuxt": "^2.12.2"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^0.0.1",
    "@nuxtjs/eslint-module": "^0.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.1",
    "eslint-config-standard": ">=12.0.0",
    "eslint-plugin-import": ">=2.16.0",
    "eslint-plugin-jest": ">=22.3.0",
    "eslint-plugin-node": ">=8.0.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^24.1.0",
    "jest": "^24.1.0",
    "vue-jest": "^3.0.3",
    "nodemon": "^1.18.9"
  }
}

new package.json

{
  "name": "site_name",
  "version": "site_version",
  "description": "site_description",
  "author": "site_author",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "test": "jest",
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "5.13.6",
    "bootstrap": "4.6.1",
    "bootstrap-vue": "2.21.2",
    "jquery": "1.12.4",
    "marked": "0.6.3",
    "nuxt": "2.15.8"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "0.0.1",
    "@nuxtjs/eslint-module": "0.0.1",
    "@vue/test-utils": "1.3.0",
    "acorn": "8.7.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "24.9.0",
    "css-loader": "4.3.0",
    "eslint": "6.2.0",
    "eslint-config-prettier": "4.3.0",
    "eslint-config-standard": "12.0.0",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-jest": "24.7.0",
    "eslint-plugin-node": "8.0.1",
    "eslint-plugin-nuxt": "3.1.0",
    "eslint-plugin-prettier": "3.4.1",
    "eslint-plugin-promise": "4.3.1",
    "eslint-plugin-standard": "5.0.0",
    "eslint-plugin-vue": "8.4.1",
    "jest": "24.9.0",
    "nodemon": "1.19.4",
    "postcss": "8.4.6",
    "prettier": "1.19.1",
    "typescript": "4.5.5",
    "vue-jest": "3.0.7",
    "webpack": "4.46.0"
  }
}

nuxt.config.js

import axios from 'axios'
let packageConfig = require('./package.json')

export default {
  target: 'static',
  mode: 'universal',
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [{ rel: 'icon', type: 'image/png', href: '/small_puce.png' }]
  },
  loading: { color: '#fff' },
  css: ['~/assets/theme.css'],
  env: {
    env_variables
  },
  plugins: [],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/eslint-module'
  ],
  axios: {},
  build: {
    babel: {
      compact: true
    },
    extend(config, { isClient, loaders: { vue } }) {
      if (isClient) {
        vue.transformAssetUrls = {
          video: ['src', 'poster'],
          source: 'src',
          img: 'src',
          image: 'xlink:href',
          'b-img': 'src',
          'b-img-lazy': ['src', 'blank-src'],
          'b-card': 'img-src',
          'b-card-img': 'src',
          'b-card-img-lazy': ['src', 'blank-src'],
          'b-carousel-slide': 'img-src',
          'b-embed': 'src'
        }
      }
    }
  }
}

dockerfile

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run generate 

FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx","-g", "daemon off;"]

trackback docker指示/Legal URL生成。

I updated my nuxt site project (static project).

In this new version:

  • I updated the Nuxt version and it's dependencies
  • edited the Nuxt configuration
  • added a new feature

When I use nuxt dev locally, the site works fine.

When I run the docker container for the deployment in production,
the /legal url doesn't work.

If I write the legal url, the page reloads and return a status code 200.

And the home page displayed.

This problem is only present since this new version.

If I go back to the previous version, the /legal page is accessible in production.

old package.json

{
  "name": "site_name",
  "version": "site_version",
  "description": "site_description",
  "author": "site_author",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "test": "jest",
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/dotenv": "^1.4.1",
    "bootstrap": "^4.1.3",
    "bootstrap-vue": "^2.15.0",
    "jquery": "^1.9.1",
    "marked": "^0.6.3",
    "nuxt": "^2.12.2"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^0.0.1",
    "@nuxtjs/eslint-module": "^0.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.1",
    "eslint-config-standard": ">=12.0.0",
    "eslint-plugin-import": ">=2.16.0",
    "eslint-plugin-jest": ">=22.3.0",
    "eslint-plugin-node": ">=8.0.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^24.1.0",
    "jest": "^24.1.0",
    "vue-jest": "^3.0.3",
    "nodemon": "^1.18.9"
  }
}

new package.json

{
  "name": "site_name",
  "version": "site_version",
  "description": "site_description",
  "author": "site_author",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "test": "jest",
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "5.13.6",
    "bootstrap": "4.6.1",
    "bootstrap-vue": "2.21.2",
    "jquery": "1.12.4",
    "marked": "0.6.3",
    "nuxt": "2.15.8"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "0.0.1",
    "@nuxtjs/eslint-module": "0.0.1",
    "@vue/test-utils": "1.3.0",
    "acorn": "8.7.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "24.9.0",
    "css-loader": "4.3.0",
    "eslint": "6.2.0",
    "eslint-config-prettier": "4.3.0",
    "eslint-config-standard": "12.0.0",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-jest": "24.7.0",
    "eslint-plugin-node": "8.0.1",
    "eslint-plugin-nuxt": "3.1.0",
    "eslint-plugin-prettier": "3.4.1",
    "eslint-plugin-promise": "4.3.1",
    "eslint-plugin-standard": "5.0.0",
    "eslint-plugin-vue": "8.4.1",
    "jest": "24.9.0",
    "nodemon": "1.19.4",
    "postcss": "8.4.6",
    "prettier": "1.19.1",
    "typescript": "4.5.5",
    "vue-jest": "3.0.7",
    "webpack": "4.46.0"
  }
}

nuxt.config.js

import axios from 'axios'
let packageConfig = require('./package.json')

export default {
  target: 'static',
  mode: 'universal',
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [{ rel: 'icon', type: 'image/png', href: '/small_puce.png' }]
  },
  loading: { color: '#fff' },
  css: ['~/assets/theme.css'],
  env: {
    env_variables
  },
  plugins: [],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/eslint-module'
  ],
  axios: {},
  build: {
    babel: {
      compact: true
    },
    extend(config, { isClient, loaders: { vue } }) {
      if (isClient) {
        vue.transformAssetUrls = {
          video: ['src', 'poster'],
          source: 'src',
          img: 'src',
          image: 'xlink:href',
          'b-img': 'src',
          'b-img-lazy': ['src', 'blank-src'],
          'b-card': 'img-src',
          'b-card-img': 'src',
          'b-card-img-lazy': ['src', 'blank-src'],
          'b-carousel-slide': 'img-src',
          'b-embed': 'src'
        }
      }
    }
  }
}

dockerfile

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run generate 

FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx","-g", "daemon off;"]

The traceback Docker indicates that /legal url is generated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文