vue-cli3.0 多页面和单页面的配置以及相互之间的切换

  在vue-cli3.0的脚手架中,创建了项目之后,很多配置都是都是已经生成了的,比如入口文件entry,和 output 等等都是已经设置好的,如果想要改动的话,我们需要添加 vue.config.js 去修改,在这里边官方提供了 publicPath 用来设置打包之后我们引入文件的路径,这里不支持相对路径,只能设置成觉得的路径,比如我们设置 publicPath: '/demo';那么我们打包之后的文件在 index.html 中去加载 css 的时候就是 link='/demo/css';还提供了 outputDir 来设置打包之后文件存放在哪里,默认的是放在 dist 下边的,这里我们也是可以去修改的;assetsDir 用来设置 css/js/img 等静态资源的存放位置

  如果我们要修改单页面应用的入口文件可以在 vue.config.js 中的 进行处理

// vue.config.js

module.exports = {
    configureWebapck: config => {
         config.entry.app = './src/index/main.js'   
    }    
}

  如果我们要配置成多页面的应用的话只需要:

// vue.config.js

module.exports = {
    pages: {
       index: {
          entry: './src/index/main.js',
          template: './public/index.html',
          filename: 'index.html' 
       } ,
       sec: {
         entry: './src/sec/main.js',
         template: './public/index.html',
         filename: 'sec.html'
       }  
   }
}

  如果想进行单页面和多页面的切换的话就只需要来修改 vue.config.js 的配置就可以了

posted @ 2019-10-13 10:54  mumengchun  阅读(3326)  评论(0编辑  收藏  举报