这次给大家带来vue2.0怎样开发多页面，vue2.0开发多页面的注意事项有哪些，下面就是实战案例，一起来看一下。
我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的，其实不是。因为vue在工程化开发的时候很依赖webpack，而webpack是将所有的资源整合到一块，弄成一个单页面。但是vue不止可以做单页面，它还可以做多页面，如果要做多页面的话需要对他的依赖，也就是webpack就是重新配置才可以。本文将详细讲webpack的配置。
vue的开发有两种，一种是直接的在script标签里引入vue.js文件即可，这样子引入的话个人感觉做小型的多页面会比较舒坦，一旦做大型一点的项目，还是离不开webpack。所以另一种方法也就是基于webpack和vue-cli的工程化开发。下面详解步骤。
先声明，如果用vue进行工程化开发，首先要有node.js，然后再下一个npm，不过一般新版的node都会有npm所以可以不用弄。指令是在命令行里输入。首先第一步就是生成一个vue项目，用指令：
vue init webpack test
登录后复制
博主本人声明的文件名为test，下载好后一路enter，之后便生成了一个vue项目，但是这个vue项目还没有一些相关的依赖，这个时候需要进入到该文件夹里面，输入指令：
npm install
登录后复制
如果网速不好，则用cnpm install，效果一样。略等几分钟后整个依赖便已经下完，之后输入指令：
npm run dev
登录后复制
则会自动打开一个界面，如果报错不能打开网页的话只有一种原因，那就端口占用，这个时候需要到/config/index.js目录下改端口就行。
当一个vue项目完成好所有的配置后，接下来就是我们的重点了，首先我们新新建几个html文件，博主我新建了一个https://www.php.cn/faq/one.html和https://www.php.cn/faq/two.html，及其与之对应的vue文件和js文件，文件目录如下：
弄好之后我们进入buildwebpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口：
entry: { app: './src/main.js', one: './src/js/one.js', two: './src/js/two.js'},
登录后复制
注意，紫色部分的变量名要起好，因为后面要用到，以防忘记。
接下来就是对开发环境run dev里进行修改，打开buildwebpack.dev.conf.js文件，在module.exports那里找到plugins，下面写法如下：
plugins: [ new webpack.DefinePlugin({ 'process.env': config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, chunks: ['app'] }), new HtmlWebpackPlugin({ filename: 'https://www.php.cn/faq/one.html', template: 'https://www.php.cn/faq/one.html', inject: true, chunks: ['one'] }), new HtmlWebpackPlugin({ filename: 'https://www.php.cn/faq/two.html', template: 'https://www.php.cn/faq/two.html', inject: true, chunks: ['two'] }), new FriendlyErrorsPlugin()]
登录后复制
在chunks那里的app指的是webpack.base.conf.js的entry那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry，如果没写则引入所有页面的资源。
之后就对run build也就是编译环境进行配置。首先打开configindex.js文件，在build里加入这个：
index: path.resolve(dirname, '../dist/index.html'),one: path.resolve(dirname, '../dist/https://www.php.cn/faq/one.html'),two: path.resolve(dirname, '../dist/https://www.php.cn/faq/two.html'),
登录后复制
然后打开/build/webpack.prod/conf.js文件，在plugins那里找到HTMLWebpackPlugin，然后添加如下代码：
new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.html' : 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', chunks: ['manifest', 'vendor', 'app']}),new HtmlWebpackPlugin({ filename: config.build.one, template: 'https://www.php.cn/faq/one.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest', 'vendor', 'one']}), new HtmlWebpackPlugin({ filename: config.build.two, template: 'https://www.php.cn/faq/two.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest', 'vendor', 'two'] }),
登录后复制
其中filename引用的是configindex.js里的build，每个页面都要配置一个chunks，不然会加载所有页面的资源。
然后one.js文件可以这样写：
import Vue from 'vue'import one from './one.vue'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#one', render: h => h(one)})one.vue写法如下： {{msg}}
export default { name: 'one', data () { return { msg: 'I am one' } }}
登录后复制
two的写法与之类似，所以不写下来了，
然后App.vue里通过这样写：
登录后复制
这样子当你打开页面的时候，点击上面one的链接就会跳转到https://www.php.cn/faq/one.html，点击two就跳转到https://www.php.cn/faq/two.html。这样子就大功告成了。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JS提示文本框邮箱地址补全
$.ajax()方法怎样从服务器里获取json数据
以上就是vue2.0怎样开发多页面的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2773044.html
