【发布时间】:2021-09-08 13:13:27
【问题描述】:
在我的生产服务器上部署我的应用程序(SPA 和 CSR)之后(在 yarn run build 之后)
从第一页和其他页面(入口点/)我收到以下错误:Uncaught SyntaxError: Unexpected token '
直接指向的第一个
我的环境:
节点版本:14.10.1 nuxt 版本:
package.json
{
"name": "secret-app-name",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt --dotenv .env.dev",
"build": "nuxt build --dotenv .env.prod",
"start": "nuxt start",
"generate": "nuxt generate",
"test": "jest"
},
"dependencies": {
"@nuxt/utils": "^2.15.3",
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/dotenv": "^1.4.1",
"@ryanburnette/vue-closable": "^1.0.0",
"@tailwindcss/forms": "^0.3.3",
"cross-env": "^7.0.2",
"moment": "^2.29.1",
"nuxt": "^2.15.3",
"vue-carousel": "^0.18.0",
"vue-js-modal": "^2.0.1",
"v-clipboard": "^2.2.3",
"vue-clipboard": "^0.0.1",
"vue-slick-carousel": "^1.0.6",
"vue-slider-component": "^3.2.14",
"vue-toast-notification": "^0.6.2"
},
"devDependencies": {
"@nuxt/types": "^2.15.3",
"@nuxt/typescript-build": "^2.1.0",
"@nuxtjs/auth-next": "^5.0.0-1624817847.21691f1",
"@nuxtjs/pwa": "^3.3.5",
"@nuxtjs/tailwindcss": "^4.0.1",
"@vue/test-utils": "^1.1.3",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^26.6.3",
"glob": "^7.1.6",
"jest": "^26.6.3",
"postcss": "^8.2.8",
"ts-jest": "^26.5.4",
"vue-jest": "^3.0.4"
}
}
nuxt.config.js
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: false,
theme: 'basic',
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
titleTemplate: '%s',
title: '',
htmlAttrs: {
lang: 'fr'
},
},
/*
** Customize the progress-bar color
*/
loading: {
color: '#000'
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
"~/assets/css/default.css",
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'~/plugins/detector.client.js',
'~/plugins/vue-packages.client.js',
'~/plugins/axios-catcher.client.js'
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
// https://go.nuxtjs.dev/tailwindcss
'@nuxtjs/tailwindcss',
'@nuxtjs/axios',
'@nuxtjs/auth-next',
'@nuxtjs/dotenv'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'@nuxtjs/pwa',
],
pwa: {
icon: false,
manifest: false,
meta: {
name: undefined,
description: undefined,
ogType: undefined,
ogSiteName: false,
ogTitle: false,
ogDescription: false,
mobileApp: false,
mobileAppIOS: undefined,
appleStatusBarStyle: undefined,
ogImage: false,
ogHost: false,
ogUrl: false,
nativeUI: false,
favicon: undefined,
icons: undefined
},
},
router: {
middleware: ['auth'],
fallback: true
},
auth: {
strategies: {
'laravelJWT': {
provider: 'laravel/jwt',
url: process.env.API_URL,
token: {
property: 'access_token',
maxAge: 60 * 60
},
refreshToken: {
maxAge: 20160 * 60
},
},
}
},
axios: {
baseURL: process.env.API_URL,
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
extend(config, ctx) {
if (ctx.isDev) {
config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
}
}
},
}
来自生产服务器的 apache2 vhost 配置:
DocumentRoot /var/www/secret/dist
<Directory /var/www/secret/dist>
Options -Indexes
AllowOverride all
Order allow,deny
allow from all
</Directory>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
你知道如何解决这个问题吗?我错过了什么吗? 谢谢!
【问题讨论】:
-
你有这个的 Github 链接吗?它在本地工作吗?
-
当我测试它时它在本地完美运行:yarn run start 我只在我的生产服务器上遇到这个问题,但我承认我不明白。我不能让你直接访问代码,这是一个在专业环境中完成的私人项目。感谢您的帮助
-
它应该是
yarn start(它是npm run starttho)。此外,如果它工作正常,这不是 IMO 的 Nuxt 问题。您是否尝试在 Heroku 上启动您的应用程序以进行调试?我不是 Nginx 专业人士,但我认为问题来自这里。在 Heroku 上,你不需要处理这种事情。试试看!
标签: vue.js vuejs2 nuxt.js single-page-application progressive-web-apps