package using nuxt framework and spa mode. After executing npm run build, the index.html in the dist folder reports an error after it is opened.
nuxt.config.js is as follows. Only a few parameters in head are modified, others are not modified
const pkg = require("./package")
module.exports = {
mode: "spa",
/*
** Headers of the page
*/
head: {
title: "nuxt",
meta: [{
charset: "utf-8"
},
{
name: "viewport",
content: "width=device-width, initial-scale=1"
},
{
hid: "",
name: "",
content: ""
}
],
},
/*
** Customize the progress-bar color
*/
loading: {
color: "-sharpfff"
},
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
*/
plugins: [],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://github.com/nuxt-community/axios-module-sharpusage
"@nuxtjs/axios"
],
/*
** Axios module configuration
*/
axios: {
// See https://github.com/nuxt-community/axios-module-sharpoptions
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
}
index.html in the dist folder is as follows
<!doctype html>
<html data-n-head="">
<head>
<title data-n-head="true">nuxt</title>
<meta data-n-head="true" charset="utf-8">
<meta data-n-head="true" name="viewport" content="width=device-width,initial-scale=1">
<meta data-n-head="true" data-hid="" name="" content="">
<link rel="preload" href="/_nuxt/495351cd0ebc489e7cb0.js" as="script">
<link rel="preload" href="/_nuxt/8328162a3e4fbd426533.js" as="script">
<link rel="preload" href="/_nuxt/dabdb9bb23e204287694.js" as="script">
</head>
<body data-n-head="">
<div id="__nuxt">
<style>-sharpnuxt-loading{visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}-sharpnuxt-loading>div,-sharpnuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}-sharpnuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid -sharpf5f5f5;border-left:.5rem solid -sharpfff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}-sharpnuxt-loading.error>div{border-left:.5rem solid -sharpff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style>
<script>
window.addEventListener("error", function () {
var e = document.getElementById("nuxt-loading");
e && (e.className += " error")
})
</script>
<div id="nuxt-loading" aria-live="polite" role="status">
<div>Loading...</div>
</div>
</div>
<script type="text/javascript" src="/_nuxt/495351cd0ebc489e7cb0.js"></script>
<script type="text/javascript" src="/_nuxt/8328162a3e4fbd426533.js"></script>
<script type="text/javascript" src="/_nuxt/dabdb9bb23e204287694.js"></script>
</body>
</html>
how to modify it? I remember the same situation will happen after vue is packaged. It can be solved by setting baseurl, but it still doesn"t display properly in nuxt.
there is another problem. Nuxt uses ssr mode. In the server, after using npm run build, npm run start, it listens for the default port number of 3000. Now it can run normally, but you need to run this service all the time. Is this correct? Thank you all.
