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 的配置就可以了