nuxt.js-静态项目:一页在生产中不可访问
我更新了我的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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论