- vue-cli3
- yarn
因为vue-cli3做了改进,使用了一套基于插件的架构。
所以需要修改webpack配置和环境变量切换等方面需要学习新写法。
想要查看cli-service抽象过的webpack配置,需要执行vue inspect > output.js。查看output.js即可
全局引入flexible.js (路径:src/libs/app/flexible.js)
main.js中添加如下代码
import '@/libs/app/flexible'
并在mixin.scss中添加@mixin px2rem
首先安装style-resources-loader的npm包,然后在vue.config.js中添加如下代码
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
// 这里的types的选项,可以通过执行vue inspect > output.js,导出output.js,然后在output.js中查看
types.forEach(type => {
config.module.rule('scss').oneOf(type).use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, 'src/css/base.scss')
]
})
})
首先安装svg-sprite-loader的npm包并创建svg组件,然后修改vue.config.js,配置对应的loader(svg-sprite-loader)。
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.tap(options => {
options = {
symbolId: 'icon-[name]'
}
return options
})
修改vue.config.js,添加顶级属性baseUrl
baseUrl: process.env.NODE_ENV !== 'development' ? '/vue_demo/dist/' : './'
根据不同生产环境配置不同的接口域名,通过修改或者添加根目录下.env.[环境变量](例如: .env.stage)文件中的对应参数
主要是把常用的:封装过的http接口、接口路径、常用的函数等进行拆分
首先按照规则在 src/routers 文件夹中添加不同功能模块相关的路由文件。js按照commonjs格式编写。
例如: routers/index.js
module.exports = [
{
path: '/about',
name: 'about',
component: () => import('@/views/about.vue')
},
{
path: '/help',
name: 'help',
component: () => import('@/views/help.vue')
}
]
src/router.js 中添加动态路由加载 webpack上下文
// 动态加载路由
function importAll (r) {
r.keys().forEach(fileName => {
if (/.\//.test(fileName)) {
fileName = fileName.replace('./', '')
}
const file = require(`./routers/${fileName}`)
routes = routes.concat(file)
})
}
importAll(require.context('@/routers', true, /.js$/))
默认情况下所有import()的产物自动生成prefetch,这种链接消耗带宽,所以需要手动关闭,然后手动选择需要prefetch的链接。
vue.config.js 中添加如下代码
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
}
}
一、安装npm包webpack, webpack-cli, add-asset-html-webpack-plugin
二、创建webpack.dll.config.js
三、package.json中添加构建执行命令
"prod_dll": "NODE_ENV=production webpack --config webpack.dll.config.js --progress",
"dev_dll": "NODE_ENV=development webpack --config webpack.dll.config.js --progress"
四、修改vue.config.js,添加plugin
// chainWebpack中添加如下代码
chainWebpack: config => {
const chunkFolder = process.env.NODE_ENV !== 'production' ? 'debug' : 'dist'
config.plugin('dll-reference-plugin')
.use(webpack.DllReferencePlugin)
.tap(options => {
options[0] = {
context: __dirname,
manifest: require(path.join(__dirname, `./src/common_chunk/${chunkFolder}/manifest.json`))
}
return options
})
config.plugin('add-asset-html-webpack-plugin')
.use('add-asset-html-webpack-plugin')
.tap(options => {
options[0] = {
filepath: path.resolve(__dirname, `./src/common_chunk/${chunkFolder}/lib_*.js`)
}
return options
})
}
├── src
├── components 组件
├── svg_icon svg组件
├── minxins 混合模式
├── views 页面
├── assets 静态资源
├── views 页面
└── libs 函数库集合
├── app 项目中操作库函数
├── flexible 1px解决方案
└── weixin 微信api相关
├── base 基础函数聚合
├── http http请求封装, 基于axios
└── apis 接口请求url聚合
├── interfaces 调用聚合、方便引用
└── utils 工具函数封装
└── index 常用函数聚合
├── imgs 图片集合
└── css 样式集合
├── .env.development 开发环境全局变量管理文件
├── .env.stage 预上线环境全局变量管理文件
├── .env.production 生产环境全局变量管理文件
├── .eslintrc.js eslint相关配置
├── babel.config.js babel相关配置
└── vue.config.js vue-cli3创建的项目,需要通过该文件进行webpack配置编辑