vue3.0创建多页面项目

npm install -g @vue/cli 安装vue3.0
vue create ‘项目名字’
淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install glob --save-dev 安装全局包

先看下项目结构
删除了一些配置增加了vue.config.js文件

const glob = require('glob');//下载glob包

function getEntry(globPath) {
    let pages = {};
    glob.sync(globPath).forEach(filepath => {
        let fileList = filepath.split('/');
        let fileName = fileList[fileList.length - 2];
        pages[fileName] = {
        	//入口文件
            entry: `src/pages/${fileName}/app.js`,
            // 模板来源
            template: `src/pages/${fileName}/index.html`,
            // 在 dist/index.html 的输出 
            filename: fileName === "/" ? "index.html" : `${fileName}/index.html`,
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', fileName]
        }
    })
    return pages
}

let pages = getEntry('./src/pages/*/*.js');

module.exports = {
    pages,
    css: {
        modules: false,
        sourceMap: false,
        loaderOptions: {
            sass: {
                data: `@import "@/assets/css/_variables.scss";
                    @import "@/assets/css/menu.scss";
                    @import "@/assets/css/icon.scss";
                    @import "@/assets/css/mixin.scss";`
            }
        }
    },
    chainWebpack: config => {
        let arr = ["console", "home", "index", "rsp", "ssp"];
        arr.forEach((v) => {//不让在空余的时间加载其他资源
            config.plugins.delete(`prefetch-${v}`)
            config.plugins.delete(`preload-${v}`)
        })
    },
    lintOnSave: false,
    productionSourceMap: false,
}

新建的pages文件夹里面

这是每个页面。每个下面都有路由 页面在views里面
下面是app.js的文件

require('@/common/functions');
import 'babel-polyfill'
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store/index.js'

//api挂载vue
import api from '@/api/install'
Vue.use(api)

//vue使用element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//引用全局样式
import '@/assets/css/app.scss';

//引用过滤器
import * as filters from '@/filters/index'
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
});

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

package.json 大多项目需要的依赖

{
  "name": "lsp_front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "core-js": "^2.6.5",
    "element-ui": "^2.8.2",
    "mockjs": "^1.0.1-beta3",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "sass-resources-loader": "^2.0.0",
    "vue": "^2.6.10",
    "vue-cropper": "^0.4.9",
    "vue-router": "^3.0.3",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "babel-eslint": "^10.0.1",
    "cross-env": "^5.2.0",
    "eslint": "^5.16.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-vue": "^5.0.0",
    "increase-memory-limit": "^1.0.7",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

仔细看官方文档
https://cli.vuejs.org/zh/config/#全局-cli-配置