Nuxt2的nuxt.config.js 配置环境

Nuxt.js提供了一个nuxt.config.js文件，可以在其中配置项目的环境。在nuxt.config.js中，可以使用process.env对象来引用环境变量。以下是一个简单的nuxt.config.js文件，其中配置了不同的环境：

module.exports = {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  },
  modules: [
    // 其他模块
  ],
  build: {
    // 构建配置
  },
  // 其他配置
}

在上述例子中，我们定义了一个名为`baseUrl`的环境变量，它的默认值为`http://localhost:3000`。你可以在你的代码中使用`process.env.baseUrl`来引用它。

你可以在命令行中设置环境变量，例如：

BASE_URL=http://example.com npm run dev

这将会把`BASE_URL`设置为`http://example.com`，并在运行`npm run dev`命令时生效。注意，这里的环境变量名称是大小写敏感的。

以上是基本的环境变量配置方法，如果你需要更多高级的配置，可以参考Nuxt.js的官方文档。

相关问题

Nuxt2的nuxt.config.js 配置build: { // 构建配置 },怎么优化

Nuxt.js在构建和部署时提供了许多配置选项，以便进行性能优化。下面是一些常见的构建配置优化：

1. 压缩代码：可以使用`uglifyjs-webpack-plugin`压缩生成的JavaScript代码。在`nuxt.config.js`文件的`build`配置中使用以下代码：

build: {
  extend (config, { isDev }) {
    if (!isDev) {
      config.plugins.push(new UglifyJsPlugin())
    }
  }
}

2. 开启Gzip压缩：可以使用`compression-webpack-plugin`插件来对生成的文件进行Gzip压缩。在`nuxt.config.js`文件的`build`配置中使用以下代码：

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`配置中使用以下代码：

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`配置中使用以下代码：

build: {
  extractCSS: true
}

这些是常见的构建配置优化，你还可以参考Nuxt.js的官方文档来了解更多优化方式。

nuxt3 nuxt.config.js seo优化配置

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它可以让你更快速、更轻松地开发应用程序。Nuxt.js 3 是 Nuxt.js 的最新版本，它提供了全新的架构和 API，具有更好的性能和更好的扩展性。下面是关于 Nuxt.js 3 中的 SEO 优化配置的介绍。

Nuxt.js 3 中的 SEO 优化配置主要是通过 nuxt.config.js 文件来进行配置。下面是一些常用的 SEO 配置项：

1. head 标签配置：可以通过配置 head 对象来设置 head 标签中的元信息，如 title、meta、link 等。

2. router 配置：可以通过配置 router 对象来设置路由相关的信息，如路由的 base、mode 等。

3. generate 配置：可以通过配置 generate 对象来设置生成静态站点的相关信息，如生成路径、页面列表等。

4. sitemap 配置：可以通过配置 sitemap 对象来生成站点地图。

5. robots 配置：可以通过配置 robots 对象来生成 robots.txt 文件。

6. canonical 配置：可以通过配置 canonical 对象来设置页面的 canonical URL。

下面是一个简单的 nuxt.config.js 文件的 SEO 配置示例：

export default {
  head: {
    title: 'My website',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  router: {
    base: '/my-website/'
  },
  generate: {
    dir: 'dist/my-website'
  },
  sitemap: {
    hostname: 'https://www.my-website.com',
    gzip: true
  },
  robots: {
    UserAgent: '*',
    Disallow: '/'
  },
  canonical: {
    baseURL: 'https://www.my-website.com'
  }
}