vue pc移动两个html,vue.js实现移动端和PC端切换，超详细

1.新建一个Vue项目，并成功运行

vue init webpack mp-demo

2.目录结构

因为在同一个项目中，分了移动端和PC端，所以我们在入口，页面，路由等地方都要把移动端和PC端区别开来。

3.修改配置文件

先说说我们要修改哪几个文件以及这几个文件的作用，都在build文件夹下：

utils.js

a> 计算资源文件存放路径

b> 生成cssLoaders用于加载 .vue文件中的样式

c> 生成styleLoaders用于加载不在 .vue文件中的单独存在的样式文件

webpack.base.conf.js

a> 配置webpack编译入口

b> 配置webpack输出路径和命名规则

c> 配置模块resolve规则

webpack.dev.conf.js

a> 将webpack的热重载客户端代码添加到每个entry对应的应用

b> 合并基础的webpack配置

c> 配置样式文件的处理规则，styleLoaders

d> 配置Source Maps

e> 配置webpack插件

webpack.pro.conf.js

a> 合并基础的webpack配置

b> 配置样式文件的处理规则，styleLoaders

c> 配置webpack的输出

d> 配置webpack插件

e> gzip模式下的webpack插件配置

f> webpack-bundle分析// utils.js

// Generate loaders for standalone style files (outside of .vue)

exports.styleLoaders = function (options) {

const output = []

const loaders = exports.cssLoaders(options)

for (const extension in loaders) {

const loader = loaders[extension]

output.push({

test: new RegExp('\\.' + extension + '$'),

use: loader

})

}

return output

}

/**

* 开始添加

* @returns {Function}

*/

// glob 是webpack安装时依赖的一个第三方模块，该模块允许你使用*等符号，例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件

var glob = require('glob')

// 页面模板

var HtmlWebpackPlugin = require('html-webpack-plugin')

// 取得相应的页面路径，因为之前的目录结构，所以是src文件下的framework文件夹

var PAGE_PATH = path.resolve(__dirname, '../src/framework')

// 用于做相应的merge处理

var merge = require('webpack-merge')

// 多入口配置

// 通过glob模块读取framework文件夹下的js后缀文件，如果该文件存在

// 那么就作为入口处理

exports.entries = function () {

var entryFiles = g