转载雪映月圆，这个博主写的配置很适合我目前的状况，所以转载过来
一、第一步: 安装vue-cli@3.x
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
@3.x安装命令 : npm install -g @vue/cli
@2.x安装命令 : npm install -g vue-cli
@2.x卸载命令 : npm uninstall vue-cli -g
二、第二步: 创建一个新的项目
vue create projectName
// 在安装过程中，仅仅默认安装了babel
image
三、第三步: 对初始目录结构进行调整
在src下新建index文件夹
把 '/src/main.js' 移动到 index 文件夹下
把 '/src/App.vue' 移动到 index 文件夹下
删除 '/components'文件夹下的组件
-
打开 '/src/index/App.vue', 调整代码，使得能够正常执行
image
四、第四步: 在package.json文件所在目录中，创建 vue.config.js 文件，写入如下配置代码
module.exports = {
pages: {
index: {
// 页面的入口
entry: './src/index/main.js',
// 页面的模板
template: './public/index.html',
// build时输出的文件名
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: '网站首页',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
}
五、第五步: 运行测试结果
npm run serve
image
六、 创建其它的页面
做完以上五个步骤后，就已经构建好第一个页面了(index.html)，接下来创建其它页面的步骤，基本和上面相似了，下面以创建 detail.html 页面为例:
第一步: 在 '/src' 下新建 detail 文件夹, 内部结构和 '/src/index/' 文件夹下的结构相同
第二步: 在 '/public/' 下新建 detail.html, 内容和 '/public/index.html' 的相同即可
第三步: 在 '/vue.config.js' 文件夹中进行配置
module.exports = {
pages: {
index: {
// 页面的入口
entry: './src/index/main.js',
// 页面的模板
template: './public/index.html',
// build时输出的文件名
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: '网站首页',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 对detail页面的配置
detail: {
entry: './src/detail/main.js',
template: './public/detail.html',
filename: 'detail.html',
title: '网站的商品详情页',
chunks: ['chunk-vendors', 'chunk-common', 'detail']
}
}
}
第四步: 完成后，重启服务，运行测试即可
image
点击链接，即可跳转到 detail.html 页面，
<a href="detail.html">跳转到商品详情页</a>
七、关于单个页面内路由和组件的配置(以detail页面为例)
就像开发单页面应用那样开发页面内容即可
在 '/src/detail/' 下创建 views 来存放组件
在'/src/detail/'下创建 router.js 文件来配置路由
总结:
一个页面一套SPA，入口文件、路由、资源的路径都要根据实际情况进行设置。
作者：雪映月圆
链接：//www.greatytc.com/p/31a65359d632
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
