vue-cli 3.x 配置多页面应用程序(配置文件vue.config.js )

1、在项目src文件夹下,创建一个pages文件夹,用来新建多页面的各个入口文件

(1)配置index页面,文件写在src/pages/index文件夹下,在浏览器中访问地址http://localhost:8090/index.html#/:

src/pages/index/index.html



  
    
    
    
    
    index页面
  
  
    
    

src/pages/index/index.js

import Vue from 'vue';
import App from './index.vue';
import router from 'router/indexRoutes.js';

Vue.config.productionTip = false

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

src/pages/index/index.vue






(2)配置main页面,文件写在src/pages/main文件夹下,在浏览器中访问地址http://localhost:8090/main.html#/:

src/pages/main/main.html



  
    
    
    
    
    main页面
  
  
    
    

src/pages/main/main.js

import Vue from 'vue';
import App from './main.vue';
import router from 'router/mainRoutes.js';

Vue.config.productionTip = false

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

src/pages/main/main.vue






2、在vue.config.js文件中设置多页面入口

const path = require('path');

module.exports = {
    // 配置多页面入口
    pages: {
        index: {
          // page 的入口
          entry: 'src/pages/index/index.js',
          // 模板来源
          template: 'src/pages/index/index.html',
          // 在 dist/index.html 的输出
          filename: 'index.html',
          // 当使用 title 选项时,
          // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
          title: 'Index Page',
          // 在这个页面中包含的块,默认情况下会包含
          // 提取出来的通用 chunk 和 vendor chunk。
          chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        main: {
            // page 的入口
            entry: 'src/pages/main/main.js',
            // 模板来源
            template: 'src/pages/main/main.html',
            // 在 dist/main.html 的输出
            filename: 'main.html',
            // 当使用 title 选项时,
            // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
            title: 'Main Page',
            // 在这个页面中包含的块,默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'main']
        }
    },

    // 环境配置
    devServer: {
        host: '0.0.0.0',
        port: '8090',
        https: false,
        open: true
    },

    // 设置路径别名
    chainWebpack: config => {
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('assets', path.join(__dirname, 'src/assets'))
            .set('components', path.join(__dirname, 'src/components'))
            .set('request', path.join(__dirname, 'src/request'))
            .set('router', path.join(__dirname, 'src/router'))
            .set('utils', path.join(__dirname, 'src/utils'))
            .set('views', path.join(__dirname, 'src/views'))
    }
};

3、删除文件public/index.html 、src/App.vue 、src/main.js

 

你可能感兴趣的:(Vue,vue.config.js)