nuxt使用记录

目录

路由跳转

 路由传参

路由收参

添加百度地图

调用百度地图参考

打包优化

nuxt使用教程

部署参考

---

路由跳转

// query 传参（显示在地址栏，刷新不丢失）
this.$router.push({ path: 'guodu', query: { text: 'test', id: 2 } })
// 获取1
async asyncData({ query }) {
  console.log(query)
  return { query }
},
// 获取2
mounted() {
  this.$route.query
}

// params 传参（刷新会丢失）
this.$router.push({ name: 'guodu', params: { id: 3 } })
// 获取1
async asyncData({ params}) {
  console.log(params)
  return { params}
},
// 获取2
mounted() {
  this.$route.params
}

 路由传参

// html 传参

    


// js 传参

路由收参

// html 使用


// js 使用

 参考：nuxt路由及传参 - 简书

添加百度地图

百度地图开发平台：地图JS API示例 | 百度地图开放平台

一、nuxt.config.js引入api接口

script: [
  {
    src: "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=申请的密钥",
    type: "text/javascript"
  },
],

 二、页面使用

mounted() {
  // 创建地图实例
  var map = new BMapGL.Map('container')
  var point = new BMapGL.Point(125.552503, 29.117022)

  // 设置地图中心点
  map.setCenter(point)
  // 设置级别
  map.setZoom(50)
  map.centerAndZoom(point, 15)
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
  // 创建点标记
  var marker = new BMapGL.Marker(point)
  // 在地图上添加点标记
  map.addOverlay(marker)

  // 创建信息窗口
  var opts = {
    width: 400,
    height: 100,
    offset: new BMapGL.Size(15, -10) // 设置标注的偏移量
  }
  var infoWindow = new BMapGL.InfoWindow(
    '
故宫博物院
地址：北京xxxx
电话： +86 2230388
',
    opts
  )
  map.openInfoWindow(infoWindow, point) // 开启信息窗口
  // 点标记添加点击事件
  marker.addEventListener('click', function () {
    map.openInfoWindow(infoWindow, point) // 开启信息窗口
  })
},

调用百度地图参考

vue nuxt npm 调用百度地图_我是李大福的博客-CSDN博客_npm 百度地图

打包优化

安装 npm i -D compression-webpack-plugin

npm i -D compression-webpack-plugin

遇到“TypeError: Cannot read property 'tapPromise' of undefined”错误，是因为版本太高，安装低版本即可解决

npm i -D [email protected]

const CompressionWebpackPlugin = require("compression-webpack-plugin");

export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [/^element-ui/],
    // splitChunks: 设置 Chunks 的最大和最小 size
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      },
    },
    
    // 安装 compression-webpack-plugin 来对文件进行压缩
    plugins: [
      new CompressionWebpackPlugin({
        test: /\.js$|\.html$|\.css/, // 匹配文件名
        threshold: 10240, // 对超过10kb的数据进行压缩
        deleteOriginalAssets: false, // 是否删除原文件
      }),
    ],
  },
};

Nuxt速度优化、性能优化、加载优化、首页加载优化、白屏优化、打包优化集合_安哥说前端的博客-CSDN博客_nuxt 优化

nuxt使用教程

Nuxt.js 入门到实战 多参数 中间件 插件异步获取数据 | 码农家园

部署参考

【亲测可用】使用pm2部署nuxt项目_前端加班仔的博客-CSDN博客_pm2 nuxt