nuxt常见问题
# 使用pm2部署nuxt
坑一： 执行pm2 start npm --name nuxt -- start部署，首页能访问，大部分页面出现 502 错误及不跳转的情况。
坑二： 使用宝塔的pm2管理器来运行项目，运行启动文件start.js，出现问题同坑一。
// 先安装node-cmd，npm i node-cmd
// start.js
const cmd = require("node-cmd");
cmd.run("npm start");
1
2
3
4
5
2
3
4
5
解决方案： 以上问题是在nuxt start正常的情况下，项目目录直接执行pm2 start start.js。
# 新页面后防止 store 值丢失
在plugins下新建文件storeCache.js
export default function (ctx) {
//离开页面 刷新前 将store中的数据存到session
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("storeCache", JSON.stringify(ctx.store.state));
});
//页面加载完成 将session中的store数据
window.addEventListener("load", () => {
let storeCache = sessionStorage.getItem("storeCache");
if (storeCache) {
// 将session中的store数据替换到store中
ctx.store.replaceState(JSON.parse(storeCache));
}
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
在nuxt.config.js中配置插件，注意关闭 ssr 渲染。
plugins: [
{src: '~/plugins/storeCache', ssr: false}
],
1
2
3
2
3
# 配置全局 scss，每个页面都引入
要使用 scss 就要先安装 node-sass 和 sass-loader（npm i node-sass sass-loader scss-loader --save-dev）。
nuxt 会自动识别被导入文件的扩展名，然后 webpack 会使用相应的预处理器进行处理，所以要先安装相对应的预处理器。
// nuxt.config.js
module.exports = {
/*
** 配置全局 css
*/
css: [
'@/assets/style/main.scss'
]
}
// main.scss
body {
background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 配置全局 scss变量 和 mixin
为页面注入 变量 和 mixin 而且不用每次都去导入他们，可以使用 @nuxtjs/style-resources 来实现。
安装，
npm i @nuxtjs/style-resources -D配置（
nuxt.config.js）：
module.exports = {
modules: [
"@nuxtjs/style-resources", // 添加对应的模块
],
styleResources: {
scss: [
"./assets/style/variables.scss", // 全局 scss 变量
"./assets/style/mixins.scss", // 全局 scss 混合
],
},
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 实现
// mixins.scss
@mixin center() {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
// variables.scss
$gray: #333;
// pages/index.vue
<style lang="scss" scoped>
.container {
background-color: $gray;
@include center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
这样就不用每次都导入，而可以直接引用了。
注意： styleResources 配置的资源路径不能使用 ~ 和 @ ，需要使用相对或绝对路径。
# 切换构建模式（SPA 和 SSR）
nuxt.config.js
export default {
mode: "spa", // span: 单页, universal：默认，服务器端渲染+客户端导航
};
1
2
3
2
3
# 配置 ESLint 代码检查及格式化
package.json 追加：
{
"dependencies": {
"eslint-plugin-vue": "^7.2.0"
},
"devDependencies": {
"@nuxtjs/eslint-config": "^5.0.0",
"@nuxtjs/eslint-module": "^3.0.1",
"babel-eslint": "^10.1.0",
"eslint": "^7.20.0",
"eslint-plugin-nuxt": "^2.0.0"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
创建 .eslintrc.js：
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: "babel-eslint",
},
extends: ["@nuxtjs", "plugin:nuxt/recommended"],
plugins: ["vue"],
// add your custom rules here
rules: {},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 配置运行端口
package.json：
{
"name": "nuxt",
"dependencies": {
...
},
"devDependencies": {
...
},
"config": {
"nuxt": {
"host": "127.0.0.1",
"port": "3001"
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
上次更新: 2024/02/22, 14:16:55