也写过几个 Vue.js 的项目了，但每次创建完项目后的一些初始化配置都得翻翻之前的项目，索性记录一下。

简要步骤

每一步做完都应该对应一个 Git Commit。

  1. 安装该项目要用到的依赖（UI、Axios……）
  2. main.js 引入（import）依赖
  3. vue.config.js
  4. PWA 配置
  5. 图片/Icon 替换
  6. Netlify 配置文件
  7. 删除 Vue 的示例

Vue.config.js

站点标题

在 pages.index.title 中修改。

PWA 相关

1
2
3
4
5
6
7
8
pwa: {
    name: 'Takasi',							// PWA 应用程序的名字
    themeColor: '#167df0',					// 移动端 Chrome 浏览器的外框颜色
    msTileColor: '#ffb703',					// 应该是 Metro 磁贴的颜色，Windows 11 又没掉了
    workboxOptions: {
      skipWaiting: true,
      exclude: [/\.map$/, /_redirects/],	// 排除 Netlify 会报 403 错误的一些文件
    }

完整文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '站点标题 | Jonbgua',
    }
  },
  pwa: {
    name: 'APP_NAME',
    themeColor: '#167df0',
    msTileColor: '#ffb703',
    workboxOptions: {
      skipWaiting: true,
      exclude: [/\.map$/, /_redirects/],
    }
  }
}

PWA 配置

强制更新并刷新页面：

registerServiceWorker.js

1
2
3
4
5
6
7
// ...
updated (registration) {
  console.log('New content is available: Please refresh.')
  registration.update()
  location.reload()
},
// ...

Netlify 配置文件

netlify.toml

1
2
3
4
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

/public/_redirects

1
2
http://blabla.netlify.app/* https://xx.jonbgua.com/:splat 301!
https://blabla.netlify.app/* https://xx.jonbgua.com/:splat 301!
许可协议

All Rights Reserved.