Nuxt3去除源代码里面的内联css样式

修改前:

 修改后:

 nuxt3项目查看网页源代码,很多css代码,inlineSSRStyles:false 这个配置官网没有了,研究了半天,终于发现了这个配置

export default defineNuxtConfig({
    ...
    features: {
        inlineStyles: false
    }
})

为了去除源代码中的window.nuxt,可以通过以下步骤实现: 1. 打开nuxt.config.js文件,在build对象下添加以下代码: ```javascript build: { extend(config, ctx) { if (ctx.isClient) { config.optimization.splitChunks.maxSize = 200000 } }, extractCSS: true, filenames: { app: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js', chunk: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js', css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css', img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[contenthash:7].[ext]', font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[contenthash:7].[ext]', video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[contenthash:7].[ext]' }, splitChunks: { layouts: true, pages: true, commons: true } }, ``` 2. 在nuxt.config.js文件中的head对象中添加以下代码: ```javascript head: { // ... script: [ { src: '/js/nuxt-client-init.js', type: 'text/javascript', body: true, charset: 'utf-8' } ] }, ``` 3. 在static目录下创建一个js文件夹,并在其中添加一个nuxt-client-init.js文件,内容如下: ```javascript window.onNuxtReady(() => { delete window.nuxt }) ``` 4. 在nuxt项目中安装webpack-merge和webpack-bundle-analyzer依赖: ```bash npm install webpack-merge webpack-bundle-analyzer --save-dev ``` 5. 在项目根目录下创建一个webpack.config.js文件,内容如下: ```javascript const merge = require('webpack-merge') const baseConfig = require('./node_modules/@nuxt/webpack/src/config/base') const analyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = merge(baseConfig, { plugins: [ new analyzer() ] }) ``` 6. 在package.json文件中的scripts对象中添加以下代码: ```javascript "scripts": { "build": "nuxt build --config-file webpack.config.js" } ``` 7. 运行npm run build命令进行打包,打包完成后可以使用webpack-bundle-analyzer来查看打包结果中的模块依赖关系。 这样就可以去除源代码中的window.nuxt了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值