基于vue-cli4.0搭建多页面模板脚手架！multipageGithub地址github.com/qinouz/mult...基于vue-cli4.0搭建多页面模板脚手架！启动项目gitclonehttps://github.com/qinouz/multipage.gitcdmultipagenpminstallnpmrundev复制代码目录√Vue-cli4√根据目录结构生成多页面配置√配置多个环境变量√rem适配方案√Vuex状态管理√Vue-router√配置别名别名√配置代理跨域√配置打包解析?生成多页面配置build/newUtils.js中的getEntry方法根据目录下的所有html文件生成页面路径和对应的html对象。varpages=utils.getEntry(['./src/module/**/*.html']);返回结果为：{'aa/as/dd/fd/ddd':'./src/module/aa/as/dd/fd/ddd/ddd.html','aa/ddd':'./src/module/aa/ddd/ddd.html','ss':'./src/module/ss/ss.html'}复制代码getEntryPages方法varmpages=utils.getEntryPages(pages);生成最终的多页面配置，目录结构需要遵循一定的规则，文件夹名称必须与主文件名和模板html文件名一致，层次结构不同限制。├──模块│└──ss||└──ss.html||└──ss.js复制代码返回结果：{'aa/as/dd/fd/ddd':{entry:'./src/module/aa/as/dd/fd/ddd/ddd.js',template:'./src/module/aa/as/dd/fd/ddd/ddd.html'},'aa/ddd':{entry:'./src/module/aa/ddd/ddd.js',模板:'./src/module/aa/ddd/ddd.html'},ss:{entry:'./src/module/ss/ss.js',template:'./src/module/ss/ss.html'}}复制代码?在package.json配置多个环境变量脚本配置devqaprd，使用--modexxx执行不同的环境通过npmrundev在本地启动，通过npmrunqa执行开发打包测试，通过npmrunprd执行staging正式打包，执行production"scripts":{"dev":"vue-cli-serviceserve--open","stage":"vue-cli-servicebuild--modestaging","build":"vue-cli-servicebuild",}复制代码配置介绍代码中可以通过process.env.VUE_APP_访问传入以VUE_APP_开头的变量。例如，VUE_APP_ENV='development'通过process.env.VUE_APP_ENV访问。除了VUE_APP_*变量，还有两个特殊变量NODE_ENV和BASE_URL在你的应用程序代码中总是可用的在项目根目录新建一个.env.*.env本地开发环境配置NODE_ENV=developmentVUE_APP_SERVICE_URL=BASE_URL=./复制code.env.qa测试环境配置NODE_ENV=productionVUE_APP_SERVICE_URL=http://www.baidu.comBASE_URL=/shopsystem/static/weixin/dist/复制code.env.prd正式环境配置NODE_ENV=productionVUE_APP_SERVICE_URL=http://www.baidu.comBASE_URL=/shopsystem/static/weixin/dist/复制代码配置环境对应的变量，以本地环境文件.env为例，用户可根据需要修改//local环境配置NODE_ENV=developmentVUE_APP_SERVICE_URL=VUE_APP_TEST=testBASE_URL=./复制代码环境不同，变量会不同//引入不同的baseApiadd根据环境resessesconstinstance=axios.create();varpath=process.env.VUE_APP_SERVICE_URL;instance.defaults.baseURL=path;复制代码▲返回顶部?不用担心rem适配方案。项目已经配置了rem适配。下面只是介绍一下：Vant中的样式默认以px为单位。如果需要使用rem单位，推荐以下两个工具：postcss-pxtorem是一个postcss插件，用于将单位转换为remlib-flexible，用于设置rem基准PostCSS配置下面提供一个基本的postcss配置，可以修改根据项目要求//https://github.com/michael-ciniawsky/postcss-load-configmodule.exports={plugins:{postcss:{plugins:[require('postcss-pxtorem')({rootValue:37.5,//转换基础选择器BlackList:[],//忽略转换正则匹配项propList:['*'],}),]}}}复制代码▲返回顶部父组件改变子组件样式深度选择器当你的子组件使用了scoped但你想在父组件中修改子组件的样式时，可以使用>>>实现：<风格范围>。a>>>.b{/*...*/}.a{/deep/.b{...}}复制代码▲返回顶部?Vuex状态管理目录结构├──store│├──modules││└──app.js│├──index.js│├──getters.js复制代码main.jsimportimportVuefrom'vue'importAppfrom'./App.vue'importstorefrom'./store'newVue({el:'#app',router,store,render:h=>h(App)})复制代码使用复制代码▲返回顶部?Vue-router在这种情况下使用hash模式，开发者根据需要修改模式库注意：如果使用history模式，需要相应修改vue.config.js中的publicPathimportVuefrom'vue'importRouterfrom'vue-router'Vue。use(Router)exportconstrouter=[{path:'/',name:'index',component:()=>import('@/views/home/index'),//路由延迟加载meta:{title:'Home',//pagetitlekeepAlive:false//keep-aliveflag}}]constcreateRouter=()=>newRouter({//mode:'history',//如果你处于历史模式，你需要配置vue.config.jspublicPath//base:'/app/',scrollBehavior:()=>({y:0}),routes:router})exportdefaultcreateRouter()复制代码更多：VueRouter▲返回顶部?配置别名aliasconstpath=require('path')constresolve=dir=>path.join(__dirname,dir)constIS_PROD=['production','prod'].includes(process.env.NODE_ENV)module.exports={chainWebpack:config=>{//添加别名config.resolve.alias.set('@',resolve('src')).set('assets',resolve('src/assets'))}}复制代码▲返回顶部?配置代理跨域如果你的项目需要跨域设置，需要输入来vue.config.js代理注释，配置相应参数module.exports={devServer:{//....proxy:{//配置跨域'/api':{target:'https://test.xxx.com',//接口的域名//ws:true,//是否启用websocketschangOrigin:true,//启用代理并在本地创建虚拟服务器pathRewrite:{'^/api':'/'}}}}}复制代码▲返回顶部?配置包分析constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports={chainWebpack:config=>{//包分析if(IS_PROD){config.plugin('webpack-report').use(BundleAnalyzerPlugin,[{analyzerMode:'static'}])}}}
