pwa + history 模式 基礎vue-cli3項目配置

1.history模式配置(設定mode:為history, base:基路徑’nginx上配置的目錄’)。

import Vue from 'vue';
import Router from 'vue-router';

const component = function(url) {
  return () => import(`@/views/${url}`);
};

Vue.use(Router);

export default new Router({
  mode: 'history', // hash / history
  // /pwa-vue為nginx負載均衡配置的目錄,如果是根目錄則為“/”
  base: process.env.NODE_ENV === 'production' ? '/pwa-vue' : process.env.BASE_URL, 
  routes: [
    {
      path: '/',
      name: 'home',
      component: component('Home.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: component('About.vue')
    }
  ]
});
           

nginx 配置。

# /pwa-vue/ vue base
location /pwa-vue/ {
	index index.html index.htm;
	if (!-e $request_filename) {
		rewrite ^/(.*) /pwa-vue/index.html last; # index放置的目錄
		break;
	}
}
           

mac 的 web 檔案放在

/usr/local/var/www/

下面，也就是

proxy_pass

===

/usr/local/var/www/pwa-vue/

window 的打開下載下傳的nginx有一個html檔案夾，和上面的配置一樣扔裡面就行（Linux 的貌似也是html）。

打開頁面連結為

http://localhost/pwa-vue

2.開啟pwa配置,同時附上vue-cli3腳手架build及dev配置。(vue.config,js)

内容太多還是直接前往github檢視～
https://github.com/yaodongyi/javascript/blob/master/pwa-vuedemo/vue.config.js
           

3.registerServiceWorker.js裡面,配置内容更新時重新整理頁面。

// 在vue-cli3根目錄下的registerServiceWorker.js，有一個updated函數 (Dialog為vant的彈出框)
    updated() {
      Dialog.alert({
        message: '您浏覽的網站有更新！'
      }).then(() => {
        window.location.reload(true);
      });
      console.log('New content is available; please refresh.');
    },
           

5.附上本地調試nginx配置。

# 如果沒有https域名則直接用localhost,也就是按照上面的配置即可。
# 如果有https域名的話，配置443端口，url則為 https://waituntil.online/pwa-vue

server_name  waituntil.online; # 這裡設定了https的域名 如果沒有則使用初始值
# server_name  127.0.0.1; 

listen 443 ssl;
ssl_certificate      ssl/*******_waituntil.online.pem; # 域名的pem 放在nginx下的ssl目錄
ssl_certificate_key  ssl/*******_waituntil.online.key; # 域名的key 放在nginx下的ssl目錄
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
           

6.http axios攔截器。

說明 process.env.VUE_APP_API 開發環境，生産環境的檔案可以在項目根目錄增加 .env.development 和 .env.production 進行配置。

// http.js檔案
import axios from 'axios';
import qs from 'qs';

if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = process.env.VUE_APP_API;
} else {
  axios.defaults.baseURL = '/api';
}

axios.interceptors.request.use(
  request => {
    request.headers = {
      // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      'Content-Type': 'application/json; charset=UTF-8', //json
      Accept: 'application/json'
    };
    // request.data = qs.stringify(request.data);
    console.log(`%c 發送 ${request.url.replace(process.env.VUE_APP_API, '')} `, 'background:#00CC6E;color:#ffffff', request);
    return request;
  },
  err => {
    return Promise.reject(err);
  }
);

axios.interceptors.response.use(
  response => {
    console.log(`%c 接收 ${response.config.url.replace(process.env.VUE_APP_API, '')} `, 'background:#1E1E1E;color:#bada55', response);
    return response.data;
  },
  error => {
    console.error(error);
    return Promise.reject(error);
  }
);

export default axios;
           

// 使用則 建立api.js檔案
import axios from './http.js';
/**
 * 測試接口
 * @param {Object} params
 * @api {post} https://www.easy-mock.com/mock/5ccec7de7ffbe958f9bc418b/all
 */
export const all_api = params => {
  return axios.get(`all`, params);
};
           

7.postcss 使用vw vh 與 rem 共存方式,實作不同倍率設計圖同時用px開發。(本項目引用vant)

vh、vw、rem究極适配方案可以參考? https://blog.csdn.net/qq_40146880/article/details/98057328