Javascript 在生产环境（nuxt build）-Js上运行后未显示页面表单
当我在dev上运行时，页面表单正确加载，但当我在生产环境中运行时，页面表单不会加载。这是页面中js粒子的结果。 尽管页面中的粒子已加载 下面是我的代码片段和屏幕截图 login.jsJavascript 在生产环境（nuxt build）-Js上运行后未显示页面表单,javascript,vue.js,nuxt.js,Javascript,Vue.js,Nuxt.js,当我在dev上运行时，页面表单正确加载，但当我在生产环境中运行时，页面表单不会加载。这是页面中js粒子的结果。 尽管页面中的粒子已加载 下面是我的代码片段和屏幕截图 login.js export default function LoginJs() { $.getScript("/particles.min.js", function () { particlesJS("particles-js", { p
export default function LoginJs() {
$.getScript("/particles.min.js", function () {
particlesJS("particles-js", {
particles: {
number: {
value: 100,
density: {
enable: true,
value_area: 500,
},
},
color: {
value: "#b1c900",
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000",
},
polygon: {
nb_sides: 5,
},
image: {
width: 100,
height: 100,
},
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 5,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false,
},
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1,
},
move: {
enable: true,
speed: 6,
direction: "none",
random: false,
straight: false,
out_mode: "out",
attract: {
enable: false,
rotateX: 600,
rotateY: 1200,
},
},
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "repulse",
},
onclick: {
enable: true,
mode: "push",
},
resize: true,
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1,
},
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3,
},
repulse: {
distance: 100,
},
push: {
particles_nb: 4,
},
remove: {
particles_nb: 2,
},
},
},
retina_detect: true,
config_demo: {
hide_card: false,
background_color: "#b61924",
background_image: "",
background_position: "50% 50%",
background_repeat: "no-repeat",
background_size: "cover",
},
});
});
}
<template>
<body>
<div id="particles-js"></div>
<div id="login-box">
<div class="main-wrapper">
<div class="account-page">
<div class="">
<h3 class="account-title" style="margin: 30px 0 30px;">Login Portal</h3>
<div class="account-box">
<div class="account-wrapper">
<div class="account-logo">
<a><img src="~/assets/logo.png" /></a>
</div>
<form method="POST">
<div class="form-group form-focus select-focus">
<label class="control-label">Username</label>
<input name="username" class="form-control floating" type="text" />
</div>
<div class="form-group form-focus select-focus">
<label class="control-label">Password</label>
<input name="password" class="form-control floating" type="password" />
</div>
<div class="form-group text-center">
<button class="btn btn-primary btn-block account-btn" type="submit">Login</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar-overlay" data-reff="#sidebar"></div>
</body>
</template>
<script>
import LoginJs from './login';
export default {
layout: "login_page",
head() {
return {
title: "Login",
LoginJs,
};
},
mounted() {
LoginJs();
},
methods: {
async loginJS() {
this.loginJS
}
}
};
</script>
寻找登录页面
运行构建时的屏幕截图
谢谢