1.0 版本点这里 -> 博客: vue-cli3 构建多页面应用 1.0 https://www.cnblogs.com/AnnieShen/p/11240043.html GitHub:vue-cli-multipage https://github.com/AinneShen/vue-cli-multiPage
在 1.0 版本上做了以下改进:
1. 增加 pages.config.JS, 入口 JS, 模版 HTML, 访问路径, 页面标题全部都可以配置, 如果访问路径配置成多级, 也会自动打包成多级目录
- module.exports = {
- page1: {
- entry: './src/pages/page1/index.js', // 入口 JS
- template: 'index.html', // 模版文件 默认是 public 里的 index.HTML
- filename: 'page1.html', // url 访问路径
- title: 'title-page1', // 页面标题
- },
- page2: {
- entry: './src/pages/page2/index.js',
- template: 'index.html',
- filename: 'page2.html',
- title: 'title-page2',
- },
- page2_1: {
- entry: './src/pages/page2/page2_1/index.js',
- template: 'index.html',
- path: '/page2',
- filename: 'page2/1.html',
- title: 'title-page2-1'
- }
- }
2. vue.config.JS 中配置 生产环境下打包去掉 console.log, 静态文件打包后放在 static 文件夹下
- const pages = require('./pages.config')
- module.exports = {
- pages,
- configurewebpack: (config) => {
- // 生产环境下去掉 console.log
- if (process.env.NODE_ENV === 'production') {
- config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
- }
- },
- lintOnSave: false,
- assetsDir: 'static', // 打包后静态文件夹名称
- chainWebpack: config => {
- // 修复热更新
- config.resolve.symlinks(true);
- },
- devServer: {
- open: true, // NPM run serve 自动打开浏览器
- index: '/page1.html' // 默认启动页面
- }
- }
3. 增加全局插件: toast 和 loading
请求触发时自动 showloading, 请求成功后 hideloading. 多个请求时等所有请求完成后 hideloading
如果请求报错, 自动弹出 toast 显示报错内容
- import axios from 'axios'
- import Vue from 'vue';
- import {toast, loading} from '@/plugins'
- Vue.config.productionTip = false
- Vue.config.devtools = process.env.NODE_ENV !== 'production';
- Vue.use(toast)
- Vue.use(loading)
- let vm = new Vue()
- axios.defaults.withCredentials = true
- let http = axios.create({
- baseURL: process.env.VUE_APP_API,
- timeout: 60 * 1000
- })
- // 获取 CancelToken 有需要的话可以用 source.cancel(); 取消其他请求
- const CancelToken = axios.CancelToken, source = CancelToken.source();
- let queueNum = 0
- http.interceptors.request.use(
- (config) => {
- // 请求前显示全局 loading
- queueNum += 1
- vm.$loading.show()
- // 全局添加 cancelToken
- config.cancelToken = source.token;
- return config;
- },
- (err) => {
- const error = err;
- return Promise.reject(error);
- },
- )
- http.interceptors.response.use(
- response => {
- // 全部请求完成后 hide loading
- queueNum -= 1
- if (queueNum === 0) {
- vm.$loading.hide()
- }
- const res = response.data
- if (res.errorCode != 0) {
- vm.$toast({text: `${res.errorMsg}(${res.errorCode})`})
- return Promise.reject(response)
- } else{
- return res
- }
- },
- error => {
- if (error && error.response) {
- queueNum -= 1
- if (queueNum === 0) {
- vm.$loading.hide()
- }
- const res = error.response.data
- vm.$toast({text: `${res.errorMsg}(${res.errorCode})`})
- } else {
- vm.$loading.hide()
- vm.$toast({text: error})
- }
- return Promise.reject(error)
- }
- )
- export function GET(url, paramsOrData) {
- return http({ method: 'GET', url, params: paramsOrData })
- }
- export function POST(url, paramsOrData) {
- return http({ method: 'POST', url, data: paramsOrData })
- }
- export default http
4. 公共代码的提取: 引用 http.JS 的页面在非生产环境下都会开启 devtools, 方便联调
5. public/index.HTML
设置 apple-touch-icon 是为了避免在 Safari 浏览器报 apple-touch-icon.PNG 404,Safari 浏览器可以将页面添加到桌面, 如果不设置 apple-touch-icon, 图标默认是页面的截图
- <!-- 禁止缓存 html -->
- <meta http-equiv="pragma" content="no-cache">
- <!-- safari 浏览器添加到桌面的图标 -->
- <link rel="apple-touch-icon" href="./favicon.ico" />
2.0 版本 GitHub vue-cli-multipage2 https://github.com/AinneShen/vue-cli-multiPage2
帮助到你的话请给个小星星哦??
来源: http://www.bubuko.com/infodetail-3329583.html