极客观点
项目管理
HarmonyOS
使用nuxt框架，spa模式进行打包，执行npm run build后，dist文件夹中的index.html打开之后报错，
nuxt.config.js如下，只修改了head中的几个参数，其他没有修改
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: '#fff'
},
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
*/
plugins: [],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://github.com/nuxt-community/axios-module#usage
'@nuxtjs/axios'
],
/*
** Axios module configuration
*/
axios: {
// See https://github.com/nuxt-community/axios-module#options
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
}
dist文件夹中index.html如下
<!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>#nuxt-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}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #fff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;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>
应该怎么修改呢，我记得vue打包之后也会出现这样的状况，设置一下baseurl就可以解决，但是在nuxt中还是不能正常显示。
还有一个问题，nuxt使用ssr模式，在服务器中，使用npm run build ,npm run start 之后，会监听默认3000端口号，现在已经可以正常运行，但是需要一直跑着这个服务，这样是不是正确。感谢各位大佬。
仔细看文档nuxt是如何运作的。你一定是使用了
npm run build命令，这什么都不需要修改，你只需要执行以下四步就可以了: