代码故事前端搬砖工

初始化配置：在创建一个 Vue 项目之后…

文章目录
  1. 1. 简要步骤
  2. 2. Vue.config.js
    1. 2.1. 站点标题
    2. 2.2. PWA 相关
    3. 2.3. 完整文件
  3. 3. PWA 配置
  4. 4. Netlify 配置文件

也写过几个 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!