基于 vue-cli5 + vue2.0 + vant,构建通用移动端项目模板
本示例 Node.js 12.13.0
yarn
yarn dev
- √ Vue-cli5
- √ 配置多环境变量
- √ rem 适配方案
- √ VantUI 组件按需加载
- √ Less 全局样式
- √ Vuex 状态管理
- √ Vue-router
- √ Axios 封装及接口管理
- √ Webpack 5 vue.config.js 基础配置
- √ 配置 alias 别名
- √ 配置 proxy 跨域
package.json
里的 scripts
配置 dev
test
staging
prod
,通过 --mode xxx
来执行不同环境
- 通过
yarn dev
启动开发环境 , 执行development
- 通过
yarn test
打包 环境测试 , 执行test
- 通过
yarn staging
打包 准生产测试 , 执行staging
- 通过
yarn prod
打包生产环境 , 执行production
yarn dev
yarn test
yarn staging
yarn prod
以 VUE_APP_
开头的变量,在代码中可以通过 process.env.VUE_APP_
访问。
比如,VUE_APP_ENV = 'development'
通过process.env.VUE_APP_ENV
访问。
除了 VUE_APP_*
变量之外,在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV
和BASE_URL
在项目根目录中新建.env.*
不用担心,项目已经配置好了 rem
适配
项目采 用Vant 自动按需引入组件 (推荐)下 面安装插件介绍:
babel-plugin-import 是一款 babel
插件,它会在编译过程中将
import
的写法自动转换为按需引入的方式
本案例采用 hash
模式,开发者根据需求修改 mode
base
注意:如果你使用了 history
模式,vue.config.js
中的 publicPath
要做对应的修改
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export const router = [
{
path: "/",
name: "index",
component: () => import("@/pages/home/index"), // 路由懒加载
meta: {
title: "首页", // 页面标题
keepAlive: false // keep-alive 标识
}
}
];
const createRouter = () =>
new Router({
// mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath
// base: '/app/',
scrollBehavior: () => ({ y: 0 }),
routes: router
});
export default createRouter();
更多:Vue Router
在config/adapter.conf.js
文件中统一管理接口
// 请求接口
import { rpc } from "@api";
const params = { user: "1001" };
rpc("接口编号", params)
.then(() => {})
.catch(() => {});
如果你的 Vue Router
模式是 hash
publicPath: './',
如果你的 Vue Router
模式是 history 这里的 publicPath 和你的 Vue Router
base
保持一致
publicPath: '/app/',
- 在
devServer
中配置开发模式参数 - 在
configureWebpack
中配置编译、插件等 webpack 配置
如果你的项目需要跨域设置,你需要打来 vue.config.js
proxy
注释 并且配置相应参数
module.exports = {
devServer: {
// ....
proxy: {
//配置跨域
"/api": {
target: "https://test.xxx.com", // 接口的域名
// ws: true, // 是否启用websockets
changOrigin: true, // 开启代理,在本地创建一个虚拟服务端
pathRewrite: {
"^/api": "/"
}
}
}
}
};
在 public/index.html 中添加
<!-- 使用CDN的CSS文件 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<!-- 使用CDN加速的JS文件,配置在vue.config.js下 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>