NUXT去掉源代码里面的css和window.__NUXT___nuxt隐藏源码内的样式

存在的问题

在我们用nuxt做项目时，通常会考虑到SEO问题

然而当我们查看源代码的时候发现页面上出现了大量的css

并且body底部还有大量的js

这样不仅对seo有一定的影响，同时，看着也不美观

怎么解决这显示css的问题

只需要在nuxt.config.js里的build 加上这一行代码即可

build: {
    extractCSS: { allChunks: true }
}
1
2
3
'
运行
运行

看下效果

解底部js的问题

通过搜索，网上的方法大概有两种

1. 通过修改node_modules/@nuxt/vue-renderer/dist/vue-renderer.js，注释掉里面的；

 APP += `<script>${serializedSession}</script>`
1

2. 在nuxt.config.js的hooks添加如下代码；

hooks:{
    'vue-renderer:ssr:context'(context){
      const routePath = JSON.stringify(context.nuxt.routePath)
      context.nuxt={serverRendered:true,routePath}
    }
}
1
2
3
4
5
6

这两种办法虽然可以去掉下面的js但是，但是对服务端渲染没有任何意义，因为这段js里包含了服务端返回的数据，并且会报错

所以，我在思考，能否把这段js生成一个js文件，而后在底部引用呢

于是我看到了node_modules/@nuxt/vue-renderer/dist/vue-renderer.js 引用了 fs-extra 模块

同时打包后的js是存在.nuxt/dist/client 文件夹内，在源代码里面，这个文件夹就是/_nuxt/

那问题不就解决了吗

于是 我们只需要吧这段代码修改一下

APP += `<script>${serializedSession}</script>`
1

修改后的代码

 //把获取到的js代码，写入到.nuxt/dist/client/init/init.js
 //然后引用这js文件
 let path = this.options.buildDir + '/dist/client/init/init.js'
 try {
    fs.outputFileSync(path, serializedSession)
    APP += `<script src="/_nuxt/init/init.js" defer></script>`;
 } catch (err) {
    console.error(err)
 }
1
2
3
4
5
6
7
8
9

最后我们看下效果

完美解决

注意：修改完后重新打包npm run build ,上传到服务器,同时服务器内的
node_modules/@nuxt/vue-renderer/dist/vue-renderer.js 也需要修改
修改完成后，别忘了给.nuxt文件夹开启读写权限,本地开发npm run dev的时候，还是需要改回来哦