vue.js - _nuxt 文件夹中缺少 js 文件
问题描述
我正在使用 nuxt 2.15.4,我突然遇到了一个非常奇怪的问题。我的代码工作正常(实际上在本地 <--dev & build--> 上仍然可以正常工作)但现在在服务器上构建后它不会正确加载,我收到这些错误:GET https://example.com/_nuxt/8bab19f.js net::ERR_ABORTED 404 (Not Found)
。怎么了?实际上我在其他服务器上有两个我的应用程序的克隆,它们工作正常!可能是因为构建时出现捆绑包大小警告吗?如果是这样,我怎样才能减少捆绑包的大小(带有示例的实用答案;))??
//nuxt.config.js
import colors from 'vuetify/es5/util/colors'
const env = require('dotenv').config()
const webpack = require('webpack')
export default {
telemetry: false,
srcDir: process.env.THEME_CUSTOMIZE === 'true' ? 'src/themes/customs/' : 'src/themes/'+process.env.THEME+'/',
loading: {
color: 'green',
failedColor: 'red',
height: '3px'
},
router: {
},
head: {
title: process.env.SITE_TITLE + ' | ' + process.env.SITE_SHORT_DESC || '',
htmlAttrs: {
lang: process.env.SITE_LANGUAGE || 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'keywords', name: 'keywords', content: process.env.SITE_KEYWORDS || '' },
{ hid: 'description', name: 'description', content: process.env.SITE_DESCRIPTION || '' },
{ hid: 'robots', name: 'robots', content: process.env.SITE_ROBOTS || '' },
{ hid: 'googlebot', name: 'googlebot', content: process.env.SITE_GOOGLE_BOT || '' },
{ hid: 'bingbot', name: 'bingbot', content: process.env.SITE_BING_BOT || '' },
{ hid: 'og:locale', name: 'og:locale', content: process.env.SITE_OG_LOCALE || '' },
{ hid: 'og:type', name: 'og:type', content: process.env.SITE_OG_TYPE || '' },
{ hid: 'og:title', name: 'og:title', content: process.env.SITE_OG_TITLE || '' },
{ hid: 'og:description', name: 'og:description', content: process.env.SITE_OG_DESCRIPTION || '' },
{ hid: 'og:url', name: 'og:url', content: process.env.SITE_BASE_URL || '' },
{ hid: 'og:site_name', name: 'og:site_name', content: process.env.SITE_OG_SITENAME || '' },
{ hid: 'theme-color', name: 'theme-color', content: process.env.SITE_THEME_COLOR || '' },
{ hid: 'msapplication-navbutton-color', name: 'msapplication-navbutton-color', content: process.env.SITE_MSAPP_NAVBTN_COLOR || '' },
{ hid: 'apple-mobile-web-app-status-bar-style', name: 'apple-mobile-web-app-status-bar-style', content: process.env.SITE_APPLE_WM_STATUSBAR_STYLE || '' },
{ hid: 'X-UA-Compatible', 'http-equiv': 'X-UA-Compatible', content: process.env.SITE_X_UA_Compatible || '' },
{ hid: 'google-site-verification', name:'google-site-verification', content: '' },
{ hid: 'enamad' , name: 'enamad' , content: process.env.ENAMAD_META},
{ hid: 'samandehi' , name: 'samandehi' , content: process.env.SAMANDEHI_META},
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: process.env.SITE_FAVICON },
{ rel: 'canonical', href: process.env.SITE_BASE_URL },
]
},
css: [
'~/assets/scss/vuetify.scss',
'~/assets/scss/style.scss',
'@mdi/font/css/materialdesignicons.css',
'font-awesome/css/font-awesome.min.css',
'@fortawesome/fontawesome-free/css/all.css',
'~/assets/scss/media.scss',
'~/assets/scss/customization.scss',
'~/assets/scss/sweetalert.scss',
'~/assets/scss/noty.scss',
'~/assets/scss/flipclock.scss',
'~/assets/scss/sorting.scss',
'~/assets/scss/cropper.scss',
'~/assets/scss/transitions.scss',
'~/assets/scss/product-zoom.scss',
'swiper/css/swiper.css',
],
plugins: [
'plugins/mixins/reqerrors.js',
'plugins/mixins/user.js',
'plugins/mixins/language.js',
'plugins/mixins/shopinfo.js',
'plugins/mixins/formattedprice.js',
'plugins/mixins/utils.js',
'plugins/mixins/cms.js',
'plugins/mixins/client.js',
'plugins/mixins/cart.js',
'plugins/axios.js',
'plugins/veevalidate.js',
'plugins/noty.js',
'@plugins/vuedraggable',
'@plugins/vuedraggable',
{src: 'plugins/vuepersiandatepicker.js', mode: 'client'},
{src: 'plugins/cropper.js', mode: 'client'},
{src: 'plugins/vue-product-zoomer.js', mode: 'client'},
{src: 'plugins/vueeditor.js', mode: 'client'},
{src: 'plugins/nuxt-swiper-plugin.js', mode: 'client' }
],
buildModules: [
'@nuxtjs/dotenv',
'@nuxtjs/vuetify',
'@nuxtjs/device',
'nuxt-gsap-module',
],
modules: [
'@nuxtjs/axios',
'@nuxtjs/auth',
['vue-sweetalert2/nuxt',
{
confirmButtonColor: '#29BF12',
cancelButtonColor: '#FF3333'
}
],
'cookie-universal-nuxt',
'@nuxtjs/gtm',
'@nuxtjs/google-gtag'
],
device: {
refreshOnResize: true
},
gtm: {
id: process.env.GOOGLE_TAGS_ID,
debug: false,
},
'google-gtag': {
id: process.env.GOOGLE_ANALYTICS_ID,
debug: false,
},
dotenv: {
path: './'
},
gsap: {
extraPlugins: {
cssRule: false,
draggable: false,
easel: false,
motionPath: false,
pixi: false,
text: false,
scrollTo: false,
scrollTrigger: false
},
extraEases: {
expoScaleEase: false,
roughEase: false,
slowMo: true,
}
},
axios: {
baseURL: process.env.API_BASE_URL,
},
auth: {
strategies: {
local: {
endpoints: {
login: { url: 'auth/login', method: 'post', propertyName: 'token' },
logout: { url: 'auth/logout', method: 'post' },
user: { url: 'auth/info', method: 'get', propertyName: '' }
}
}
},
redirect: {
login: '/login',
home: '',
logout: '/login'
},
cookie: {
prefix: 'auth.',
options: {
path: '/',
maxAge: process.env.AUTH_COOKIE_MAX_AGE
}
}
},
publicRuntimeConfig: {
gtm: {
id: process.env.GOOGLE_TAGS_ID
},
'google-gtag': {
id: process.env.GOOGLE_ANALYTICS_ID,
}
},
vuetify:{
rtl: process.env.SITE_DIRECTION === 'rtl' ? true : false ,
customVariables: ['~/assets/scss/variables_vuetify.scss'],
breakpoint: {
thresholds: {
xs: 600,
sm: 960,
md: 1366,
lg: 1920,
},
},
icons: {
iconfont: 'mdi',
},
treeShake: true,
theme: {
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},
build: {
transpile: ['vee-validate/dist/rules'],
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
jQuery: "jquery",
"window.jQuery": "jquery",
'_': 'lodash'
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
postcss: {
preset: {
features: {
customProperties: false,
},
},
},
babel:{
plugins: [
['@babel/plugin-proposal-private-methods', { loose: true }]
]
},
loaders: {
scss: {
additionalData: `
$direction:${process.env.SITE_DIRECTION};
$lang:${process.env.SITE_LANGUAGE};
$theme_body_color:${process.env.THEME_BODY_COLOR};
$theme_main_color:${process.env.THEME_MAIN_COLOR};
$theme_main_color2:${process.env.THEME_MAIN_COLOR2};
$theme_side_color:${process.env.THEME_SIDE_COLOR};
$theme_side_color2:${process.env.THEME_SIDE_COLOR2};
$theme_link_color:${process.env.THEME_LINK_COLOR};
`
}
},
}
}
包.json
{
"name": "nuxt",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/auth": "^4.9.1",
"@nuxtjs/axios": "^5.13.1",
"@nuxtjs/device": "^2.1.0",
"@nuxtjs/google-gtag": "^1.0.4",
"@nuxtjs/gtm": "^2.4.0",
"chart.js": "^2.9.3",
"cookie-universal-nuxt": "^2.1.4",
"core-js": "^3.9.1",
"jquery": "^3.5.1",
"nuxt": "2.15.4",
"swiper": "^5.4.5",
"v-viewer": "^1.5.1",
"vee-validate": "^3.3.7",
"vue-awesome-swiper": "^4.1.1",
"vue-chartjs": "^3.5.0",
"vue-cropperjs": "^4.1.0",
"vue-easy-dnd": "^1.10.2",
"vue-persian-datetime-picker": "^2.2.0",
"vue-product-zoomer": "^3.0.1",
"vue-sweetalert2": "^4.2.1",
"vue2-editor": "^2.10.2",
"vuedraggable": "^2.24.0"
},
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.15.1",
"@mdi/font": "^5.9.55",
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/vuetify": "1.11.3",
"flipclock": "^0.10.8",
"font-awesome": "^4.7.0",
"noty": "^3.2.0-beta",
"nuxt-gsap-module": "^1.2.1",
"sass": "1.32.13"
}
}
解决方案
nuxt.config.js
您的配置中可能会改进的一些事情:
const env = require('dotenv').config()
不需要,因为它已经被烘焙到 Nuxt 中- 不是问题,而是一种风格,使用es6 模板文字进行插值,它更具可读性
- 你
google-site-verification
是硬编码的,可能不需要 - 你的
css
财产确实有很多东西,我很确定你不需要每一页上的所有东西。因此,您可以仅在需要时调用它们,并拥有一个global.scss
文件以使其对剩余(强制性)全局 CSS 更加有序 - 也一样
plugins
,那里有很多东西(@plugins/vuedraggable
写了两次) - mixins 不应该在
plugins
每个组件中而是加载,实际上在 Vue3 中已被弃用 @nuxtjs/dotenv
应该从buildModules
和package.json
- 您应该删除
gsap
密钥中的一些选项,因为默认选项已经是您传递的选项,只需保留slowMo
axios
应使用 runtimeConfigs 进行配置,如下所述:https ://stackoverflow.com/a/67983038/8816585- 您的
auth
密钥可能适用于 URL 之类的auth/login
,但我可能会确定这适用于类似的东西/auth/login
vuetify
的 RTL 由环境变量决定?应该是动态的并且取决于 HTML IMOplugin-proposal-private-methods
是一个非常丑陋的修复,它已被修复,2.15.5
但出于安全原因,我宁愿将其更新为2.15.7
- 不确定什么是 scss 加载器,但我认为这可以通过“CSS 变量”实现动态
- 我不确定您实际上是如何加载 lodash 的,我只是希望您实际上只使用几种方法时不会带来整个库
- 当然,在我看来,我会在使用 Vue 时完全放弃 jQuery,因为在使用这个框架时它根本没有用。
推荐阅读
- node.js - 你如何用 jest 测试返回 gaurd 的备用分支?
- python - 如何解决 Mac 中的“No module named 'telepot”'错误
- java - 在 java hibernate 中你可以有一个不是实体的模型吗?
- python - 我怎样才能恢复对公会的更改 | 不和谐.py
- c++ - 我对 Visual Studio 的内存管理和内存窗口有疑问
- microsoft-graph-api - 当电子邮件存储在多个列中时查询以通过电子邮件获取用户
- c# - Blazor wasm - 在哪里检查用户权限
- angular - Angular 8 应用程序通过 https 访问本地主机上的代理 Spring Boot 应用程序
- python - 如何打印接下来的几行
- c# - 为什么协方差不能按预期工作?