let pageMethod = require('./util/getPages.js');

pages = pageMethod.pages();

module.exports = {

    pages,

    publicPath: "./",//部署应用包时的基本 URL

    outputDir: "dist",//运行时生成的生产环境构建文件的目录

    assetsDir:"static",//放置生成的静态资源(js,css,img,fonts)的目录

    productionSourceMap:false,//生产环境的 source map(打包引用的是js,错误指向map,便于解析)

    filenameHashing:false,//生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存(public中的静态文件不会加hash)

    css: {

        modules:true,//只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块

        sourceMap:false

    },

 

}

 

const glob = require('glob')

let pages = {}

module.exports.pages = function (){

//获取pages下匹配路径段中0个或多个任意字符,获取pages目录下的所有js文件

    glob.sync( './src/pages/*/*.js').forEach(filepath =>

    {

        let fileList = filepath.split('/');

        let fileName = fileList[fileList.length-2];

        pages[fileName] = {

            entry: `src/pages/${fileName}/${fileName}.js`,// page 的入口

            // 模板来源

            template: `src/pages/${fileName}/${fileName}.html`,

            // 在 dist/index.html 的输出

            filename: process.env.NODE_ENV === 'development'?`${fileName}.html`:`${fileName}.html`,

            // 提取出来的通用 chunk 和 vendor chunk。

            chunks: ['chunk-vendors', 'chunk-common', fileName]

        }

    })

    return pages

};

 

 

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover">

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="black" name="apple-mobile-web-app-status-bar-style">

    <meta name="format-detection" content="telephone=no, email=no">

    <meta name="W_design" content="750">

    

    <title>xxxx</title>

    <script src="./static/base/js/flexible.js"></script>

  </head>

  <body>

    <noscript>

      <strong>浏览器版本过低,无法支持此页面,请升级页面;</strong>

    </noscript>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

 

 

import Vue from 'vue'

import App from './index.vue'

Vue.config.productionTip = false

 

new Vue({

  render: h => h(App),

}).$mount('#app')

 

 

<template>

  <div class="app">

  </div>

</template>

 

<script>

import Pro from "../../components/progress/pro.vue";

 

export default {

  data() {

    return {

      ssOk: false

    };

  },

  methods: {

  },

 watch:{},

mounted():{},

  components: {

    Pro: Pro

  }

};

 

 

</script>

<style type="text/css" lang="scss" scoped>

</style>