vue-cli 搭建多项目应用

最新推荐文章于 2024-08-22 09:43:17 发布

华玖

最新推荐文章于 2024-08-22 09:43:17 发布

阅读量225

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_30675311/article/details/110956664

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue 版本
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"

先用vue create projectName 或用 vue ui图形界面创建一个单页面应用。

在根目录创建vue.config.js配置文件。
在src目录下创建pages文件夹
在pages目录下创建finance、restaurant、index文件夹
在finance目录在创建App.vue、main.js、router.js文件
App.vue内容：

<template>
  <div id="finance">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "Finance"
}
</script>

<style scoped>

</style>

main.js内容：

import Vue from 'vue'
import Finance from './App.vue'
import router from './router'
import store from '../../store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(Finance)
}).$mount('#finance')

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Set',
        component: () => import('./set')
    }
]

const router = new VueRouter({
    routes
})

export default router

在restaurant目录在创建App.vue、main.js、router.js文件
App.vue内容：

<template>
  <div id="restaurant">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "Restaurant"
}
</script>

<style scoped>

</style>

main.js内容：

import Vue from 'vue'
import Restaurant from './App.vue'
import router from './router'
import store from '../../store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(Restaurant)
}).$mount('#restaurant')

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Set',
        component: () => import('./set')
    }
]

const router = new VueRouter({
    routes
})

export default router

index文件的App.vue、main.js

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "App"
}
</script>

<style scoped>

</style>

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    render: h => h(App)
}).$mount('#app')

vue.config.js内容：

module.exports = {
    pages: {
        index:{
            entry: 'src/pages/index/main.js',
            template: 'public/index.html',
            filename: 'index.html',
            title: '首页',
        },
        finance: {
            entry: 'src/pages/finance/main.js',
            template: 'public/finance.html',
            filename: 'finance.html',
            title: '财务管理',
        },
        restaurant:{
            entry:"src/pages/restaurant/main.js",
            template:"public/restaurant.html",
            filename:"restaurant.html",
            title: '餐饮管理',
        }
    }
}

在public文件下创建finance.html、restaurant.html
主要把id为finance 这样就能对应上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.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="finance"></div>
<!-- built files will be auto injected -->
</body>
</html>

<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="restaurant"></div>
<!-- built files will be auto injected -->
</body>
</html>

运行npm serve
默认显示的页面

访问财务模块：

访问餐饮模块：

本地访问：
比如：餐饮模块 http://192.168.3.60:4218/restaurant#/ 对应模块后面不用加 .html 服务器需要加上

最后改好的目录结构：

码云地址：https://gitee.com/huajiuZhao/stone-test.git

服务器部署：
执行npm run build
得到dist文件
把dist文件的内容放到 nginx
nginx配置：

location / {
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-Forwarded-Proto https;
            proxy_redirect off;
            proxy_connect_timeout      240;
            proxy_send_timeout         240;
            proxy_read_timeout         240;
            client_max_body_size       120M;
            proxy_cache_valid 200 302 24h;
            proxy_cache_valid 301 1d; 
            proxy_cache_valid any 1m; 
            expires 30d;
            root   /h5/dist;
            index  index.html index.htm;
        }

在浏览器访问：(线上)
比如：餐饮模块 https://www.xxxx.com/restaurant.html#/ 一定要在对应模块后面加 .html 才能访问