vueCli2多页面 实测成功

Posted 2021-01-29 webxu

仿照vuecli生成的index.html    及src文件夹下面的main.js,App.vue   3个文件在复制一次（位置不变）

例如

建立newpage.html 复制index.html的内容 （修改div的id为newpage） 

 

建立Newpage.vue复制App.vue的内容

修改id为newpage

name:‘Newpage‘

 

 

建立newpage.js复制main.js的内容（

修改import App from ‘./App‘    变为  import Newpage  from‘./Newpage.vue‘     ==>.vue不能少

修改 new Vue  里面的el为#newpage   

components: { Newpage},

template: ‘<Newpage/>‘

）   

修改config/index.js   

找到

index: path.resolve(__dirname, ‘../dist/index.html‘),

下面加上

newpage: path.resolve(__dirname, ‘../dist/newpage.html‘),

 

修改build/webpack.base.conf.js

module.exports = {

context: path.resolve(__dirname, ‘../‘),

entry: {

　　app: ‘./src/main.js‘,

　　newpage:‘./src/newpage.js‘

},

 

修改build/webpack.dev.conf.js

 

new HtmlWebpackPlugin({

　　filename: ‘index.html‘,

　　template: ‘index.html‘,

　　inject: true

}),

新加下面的

new HtmlWebpackPlugin({

　　filename: ‘newpage.html‘,

　　template: ‘newpage.html‘,

　　inject: true,

　　chunks:[‘newpage‘]

}),

 

修改build/webpack.prod.conf.js

new HtmlWebpackPlugin({

　　filename: config.build.index,

　　template: ‘index.html‘,

　　inject: true,

　　minify: {

　　　　removeComments: true,

　　　　collapseWhitespace: true,

　　　　removeAttributeQuotes: true

　　　　// more options:

　　　　// https://github.com/kangax/html-minifier#options-quick-reference

　　},

　　// necessary to consistently work with multiple chunks via CommonsChunkPlugin

　　chunksSortMode: ‘dependency‘

}),

新加下面的

new HtmlWebpackPlugin({

　　filename: config.build.rule,

　　template: ‘newpage.html‘,

　　inject: true,

　　minify: {

　　　　removeComments: true,

　　　　collapseWhitespace: true,

　　　　removeAttributeQuotes: true

　　　　// more options:

　　　　// https://github.com/kangax/html-minifier#options-quick-reference

　　},

　　// necessary to consistently work with multiple chunks via CommonsChunkPlugin

　　chunksSortMode: ‘dependency‘,

　　chunks: [‘manifest‘,‘vendor‘,‘newpage‘]

}),

 

因为是临时才知道是多页面，整个项目页面已完成  要跳转的话就是在这个新加的Newpage.vue页面里面加入钩子函数进行路由跳转    我的入口只有2个  就只需要加一个页面    以此例推

然后npm run build打包  完事

参考https://blog.csdn.net/cookysurongbin/article/details/79107706