如何解决在生产中运行nuxt构建后不显示页面表单-Js Particles
当我在dev上运行时，我的页面表单可以正确加载，但是在生产环境中运行时，则不会加载页面表单。这是页面中js粒子的结果。 尽管页面中的粒子已加载。
下面是我的代码段和屏幕截图。
login.js
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,speed: 40,size_min: 0.1,line_linked: {
enable: true,distance: 150,color: "#ffffff",opacity: 0.4,width: 1,move: {
enable: true,speed: 6,direction: "none",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",});
});
}
login.vue
<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>
在开发人员上运行时的屏幕截图
在构建中运行时的屏幕截图
谢谢。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。