赞
踩
适合场景
所有系统都在同一目录下。配置多入口多出口。每个系统之间可以链接。每个系统内依然采用Vue单页应用开发。
产品需求:一套代码 兼容pc端和移动端 , 移动端和pc端的样式布局差别很大,需要使用多界面,并判断使用手机的时候跳转移动端代码,使用pc端跳转pc端代码。
项目目录
分为两部分代码,pc 和mobile
第一步:创建一个登陆页面的文件
在项目public文件夹下创建一个login.html,其实就是将index.html复制一份,将title改一下:
<!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.0"> <title>Document</title> </head> <body> <div id="login"></div> </body> </html>
第二步:在src文件夹下创建一个modules文件夹,分别创建login.main.js、login.router.js、login.vue三个文件
三个文件内容如下:
login.main.js: 仿照main.js
import Vue from 'vue'
import App from './login.vue'
import router from './login.router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#login')
login.router.js (仿照router.js)
router/index.js中需要的设置
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) // 首页用重定向的方式来进行适配的方案: const redirectPath = /Android |webos | iphone iPod BlackBerry liPad/i.test(navigator.userAgent) ? '/m_index' : '/index'; import index from '../../components/index.vue' Vue.use(VueRouter) const routes = [ { path: "/", redirect: redirectPath, }, { path: '/index', name: index, component: index }, ] const router = new VueRouter({ // 去掉路由中的#号 mode: 'history', routes }) router.beforeEach((to, from, next) => { if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = '/m_index.html/' return } next() }) export default router
login.router.js
import Vue from 'vue' import VueRouter from 'vue-router' import login from '../../components/login.vue' Vue.use(VueRouter) const routes = [ { path: '/login', name: login, component: login }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router
界面自行配置
vue.config.js
const path = require('path') const debug = process.env.NODE_ENV !== 'production' module.exports = { publicPath: '/', // 根域上下文目录 outputDir: 'dist', // 构建输出目录 assetsDir: 'static', // 静态资源目录 (js, css, img, fonts) lintOnSave: false, // 是否开启eslint保存检测,有效值:ture | false | 'error' runtimeCompiler: true, // 运行时版本是否需要编译 transpileDependencies: [], // 默认babel-loader忽略mode_modules,这里可增加例外的依赖包名 productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度 configureWebpack: config => { // webpack配置,值位对象时会合并配置,为方法时会改写配置 if (debug) { // 开发环境配置 config.devtool = 'cheap-module-eval-source-map' } else { // 生产环境配置 } Object.assign(config, { // 开发生产共同配置 resolve: { // 起别名 alias: { '@': path.resolve(__dirname, './src'), '@c': path.resolve(__dirname, './src/components'), 'vue$': 'vue/dist/vue.esm.js', 'assets': '@/assets', 'common': '@/common', 'components': '@/components', 'network': '@/network', 'router': '@router', 'views': '@views', } }, }) }, // css: { // loaderOptions: { // css: {}, // postcss: { // plugins: [ // require('postcss-px2rem')({ // remUnit: 37.5 // }) // ] // } // } // }, pages: { //(1)输出一个页面 // main: { // entry: 'src/main.js', // template: 'public/index.html', // filename: 'maker.html', // chunks: ['chunk-vendors', 'chunk-common', 'index'] // }, //(2)输出多个页面 login: { template: "public/login.html", entry: "src/modules/mobile/login.main.js", filename: "login.html", title: "login", keywords: "333", description: "444", }, index: { template: "public/index.html", entry: "src/modules/pc/main.js", filename: "index.html", title: "index", keywords: "333", description: "444", } }, chainWebpack: config => { // webpack链接API,用于生成和修改webapck配置,https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md // 这里是对环境的配置,不同环境对应不同的BASE_URL,以便axios的请求地址不同 config.plugin('define').tap(args => { args[0]['process.env'].BASE_URL = JSON.stringify(process.env.BASE_URL) return args }) if (debug) { // 本地开发配置 } else { // 生产开发配置 } }, parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译 pluginOptions: { // 第三方插件配置 }, pwa: { }, devServer: { open: false, host: 'localhost', port: 80, https: false, hotOnly: false, // 注意下面 需要写入接口 , 如果没有接口则进行注释即可 proxy: { // 配置跨域 '/api': { target: 'https://127.0.0.1:80', //接口域名 ws: true, //是否代理websockets changOrigin: true, //是否跨域 pathRewrite: { //重置路径 '^/api': '' } } }, } }
即可完成
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。