Nuxt2项目中该怎么将nuxt.config.js的以下代码 script: [ { hid: 'conversion', innerHTML: ` gtag('event', 'conversion', { 'send_to': 'AW-11183969399/0ZgdCOW6waEYEPeo99Qp', 'transaction_id': '' }); `, }, ] 添加再单个vue文件中
时间: 2023-08-18 19:05:12 浏览: 42
你可以在单个 Vue 文件的 `<head>` 标签中添加 `script` 标签,并将上述代码放在其中,如下:
```html
<template>
<!-- your template here -->
</template>
<script>
export default {
head() {
return {
script: [
{
hid: 'conversion',
innerHTML: `gtag('event', 'conversion', { 'send_to': 'AW-11183969399/0ZgdCOW6waEYEPeo99Qp', 'transaction_id': '' });`,
},
],
};
},
};
</script>
```
注意要将代码放在 `head()` 方法中,以确保它们被正确添加到页面的 `<head>` 标签中。同时,`hid` 属性可以用于避免在页面中重复添加相同的代码。
相关问题
Nuxt2的nuxt.config.js 配置build: { // 构建配置 },怎么优化
Nuxt.js在构建和部署时提供了许多配置选项,以便进行性能优化。下面是一些常见的构建配置优化:
1. 压缩代码:可以使用`uglifyjs-webpack-plugin`压缩生成的JavaScript代码。在`nuxt.config.js`文件的`build`配置中使用以下代码:
```js
build: {
extend (config, { isDev }) {
if (!isDev) {
config.plugins.push(new UglifyJsPlugin())
}
}
}
```
2. 开启Gzip压缩:可以使用`compression-webpack-plugin`插件来对生成的文件进行Gzip压缩。在`nuxt.config.js`文件的`build`配置中使用以下代码:
```js
const CompressionPlugin = require('compression-webpack-plugin')
build: {
extend (config, { isDev }) {
if (!isDev) {
config.plugins.push(new CompressionPlugin())
}
}
}
```
3. 设置CDN:可以使用`externals`选项将一些常用库,如Vue、React等,从打包后的文件中剔除,并在HTML中通过CDN引入。在`nuxt.config.js`文件的`build`配置中使用以下代码:
```js
const VueExternals = {
vue: 'Vue',
'vue-router': 'VueRouter'
}
build: {
extend (config, { isDev }) {
config.externals = Object.assign(config.externals || {}, VueExternals)
}
}
```
4. 提取CSS:可以使用`extractCSS`选项将CSS提取到单独的文件中,以避免在每个页面中重复加载CSS。在`nuxt.config.js`文件的`build`配置中使用以下代码:
```js
build: {
extractCSS: true
}
```
这些是常见的构建配置优化,你还可以参考Nuxt.js的官方文档来了解更多优化方式。
nuxt项目去除源代码中的window.nuxt
为了去除源代码中的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了。