老实说,我正在开发一个相当大的应用程序。当我在开发环境中工作时,一切都很好,没有错误或类似的事情。现在我切换到生产环境,我得到了很多错误。由于某种原因,nuxt没有加载某些图像。我的图像存储在 assets/**/*
.
图像导入示例:
<img :src="require(~/assets/establishment_img/${image})" alt="preview image">
以下是错误:
nuxt-config.js
const path = require("path")
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "Estudiant Orientation",
htmlAttrs: {
lang: "en"
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" }
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "stylesheet",
type: "text/css",
href:
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
}, // font-awesome css
{
rel: "stylesheet",
type: "text/css",
href:
"https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.css"
}, // swiper css
{
rel: "stylesheet",
type: "text/css",
href:
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
}, // animate css
{
rel: "stylesheet",
type: "text/css",
href:
"https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.5/sweetalert2.min.css"
} // sweetalert2 css
],
script: [
{
hid: "stripe",
src:
"https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.min.js",
defer: true
}, // swiper js
{
hid: "stripe",
src:
"https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.5/sweetalert2.all.js",
defer: true
}, // sweetalert2 js
{
hid: "stripe",
src:
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js",
defer: true
}, // chart js
{
hid: "stripe",
src: "https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js",
defer: true
}, // vue-chart js
{
hid: "stripe",
src: "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js",
defer: true
}, // gsap js
{
hid: "stripe",
src:
"https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.5/ScrollTrigger.min.js",
defer: true
}, // ScrollTrigger js
{
hid: "stripe",
src: "https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js",
defer: true
} // three js
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
"~/assets/css/global.css",
"~/assets/css/animations.css",
"~/assets/css/variables.css",
"~/assets/css/dashboard-light.css",
"~/assets/css/modal.css",
"~/node_modules/vue-select/dist/vue-select.css"
],
// Global JS
js: [
"~/node_modules/trading-vue-js/dist/trading-vue.min.js",
"~/assets/js/hover-effect.umd.js" // distortion hover effect js
],
//router active links
router: {
linkActiveClass: '--do-nothing',
linkExactActiveClass: 'active',
},
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{ src: "~/plugins/_globals.js" },
{ src: "~/plugins/vue-chartkick.js", mode: "client" },
{ src: '~/plugins/vuex-persist.js', ssr: false},
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/bootstrap
"bootstrap-vue/nuxt",
"@nuxtjs/proxy",
"cookie-universal-nuxt",
"@nuxtjs/bootstrap-vue",
],
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
},
// Specifying the build directory
buildDir: path.resolve(__dirname, "../server/public"),
// environment proxy
proxy: {
"/api": {
target: "http://localhost:5000"
}
},
router: {
middleware: ["user-auth"]
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {}
};
这也是我在index.js中为服务器端执行的操作:
// Handling Production
if (process.env.NODE_ENV === 'production') {
// Static Folder
app.use(express.static(__dirname + '/public/'));
// Handle SPA
app.get(/.*/, (req, res) => res.send(__dirname + '/public/index.html'));
}
有办法解决这个问题吗?谢谢
1条答案
按热度按时间ghhaqwfi1#
没有必要使用
require(~/assets/establishment_img/${image})
在你的nuxt.js应用程序中构建!您只需将静态图像放入nuxt项目根目录下的/static/文件夹中,然后使用以下方法在应用程序中访问它:
因此,它将在开发模式和生产模式下都可用