multipageGithub地址 github.com/qinouz/mult… 启动项目git clone https://github.com/qinouz/multipage.gitcd multipage npm install npm run dev复制代码 目录
✅ 生成多页面配置
返回结果为： { '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'
}另外我搞前端开发9年了。如果大家有问题或者交流经验可以来我的扣扣裙 519293536 找 我 都会尽力帮大家哦getEntryPages 方法 var mpages = utils.getEntryPages(pages); 生成最终多页面配置，目录结构需要按照一定规则， 文件夹名与主文件名以及模板html 文件名 必须要一致，层级结构不限制。├── module │ └── 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', template: './src/module/aa/ddd/ddd.html' }, ss:{ entry: './src/module/ss/ss.js', template: './src/module/ss/ss.html' } }复制代码✅ 配置多环境变量
"scripts": { "dev": "vue-cli-service serve --open", "stage": "vue-cli-service build --mode staging", "build": "vue-cli-service build",
}复制代码配置介绍 以 在项目根目录中新建
NODE_ENV = development VUE_APP_SERVICE_URL = BASE_URL = ./复制代码
NODE_ENV = production VUE_APP_SERVICE_URL = http://www.baidu.com BASE_URL = /shopsystem/static/weixin/dist/复制代码
NODE_ENV = production VUE_APP_SERVICE_URL = http://www.baidu.com BASE_URL = /shopsystem/static/weixin/dist/复制代码 配置对应环境的变量，拿本地环境文件 // 本地环境配置 NODE_ENV = development VUE_APP_SERVICE_URL = VUE_APP_TEST=test BASE_URL = ./复制代码 根据环境不同，变量就会不同了 // 根据环境不同引入不同baseApi地址const instance = axios.create();var path = process.env.VUE_APP_SERVICE_URL; instance.defaults.baseURL = path;复制代码 ✅ rem 适配方案不用担心，项目已经配置好了 Vant 中的样式默认使用
PostCSS 配置下面提供了一份基本的 // https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = { plugins: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 37.5, // 换算的基数
selectorBlackList: [], // 忽略转换正则匹配项
propList: ['*'],
}),
]
}
}
}复制代码父组件改变子组件样式 深度选择器当你子组件使用了 <style scoped>
.a >>> .b { /* ... */ }
.a {
/deep/ .b {
...
}
}
</style>复制代码✅ Vuex 状态管理目录结构 ├── store │ ├── modules │ │ └── app.js │ ├── index.js │ ├── getters.js复制代码
import Vue from 'vue'import App from './App.vue'import store from './store'new Vue({ el: '#app',
router,
store, render: h => h(App)
})复制代码使用 <script>
import {mapGetters} from 'vuex' export default { computed: {
...mapGetters(['userName'])
}, methods: { // Action 通过 store.dispatch 方法触发
doDispatch() { this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
}
}
}</script>复制代码✅ Vue-router本案例采用 注意：如果你使用了 import Vue from 'vue'import Router from 'vue-router'
Vue.use(Router)export const router = [
{ path: '/', name: 'index', component: () => import('@/views/home/index'), // 路由懒加载
meta: { title: '首页', // 页面标题
keepAlive: false // keep-alive 标识
}
}
]const createRouter = () => new Router({ // mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath // base: '/app/',
scrollBehavior: () => ({y: 0}), routes: router
})export default createRouter()复制代码更多:Vue Router ✅ 配置 alias 别名const path = require('path')const resolve = dir => path.join(__dirname, dir)const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)module.exports = { chainWebpack: config => { // 添加别名
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
}
}复制代码✅ 配置 proxy 跨域如果你的项目需要跨域设置，你需要打来 module.exports = { devServer: { // ....
proxy: { //配置跨域 '/api': { target: 'https://test.', // 接口的域名 // ws: true, // 是否启用websockets
changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
pathRewrite: { '^/api': '/'
}
}
}
}
}复制代码✅ 配置 打包分析const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports = { chainWebpack: config => { // 打包分析 if (IS_PROD) {
config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
{ analyzerMode: 'static'
}以上的都会了吗？另外我搞前端开发9年了。如果你有问题或者交流经验可以来我的扣扣裙 519293536 找 我 都会尽力帮大家哦 |
|
|
