通过 npm run serve 启动本地 , 执行 development
通过 npm run test 打包测试 , 执行 testing
通过 npm run build 打包正式 , 执行 production
"scripts": {
"serve": "vue-cli-service serve --open",
"test": "vue-cli-service build --mode testing",
"build": "vue-cli-service build",
}
在项目根目录中新建.env.
.env.development 本地开发环境配置
NODE_ENV='development'
.env.staging 测试环境配置
NODE_ENV='production'
.env.production 正式环境配置
NODE_ENV='production'
这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV development testing production
变量我们统一在 src/config/env.*.js 里进行管理。
这里有一个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢?
因为修改起来方便,不需要重启项目,符合开发习惯。
config/index.js
// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.NODE_ENV)
module.exports = config
配置对应环境的变量,拿本地环境文件 env.development.js 举例,用户可以根据需求修改
// 本地环境配置
module.exports = {
title: 'vue-h5-template',
baseUrl: 'http://localhost:9018', // 项目地址
baseApi: 'https://test.xxx.com/api', // 本地api请求地址
APPID: 'xxx',
APPSECRET: 'xxx'
}
根据环境不同,变量就会不同了
// 根据环境不同引入不同baseApi地址
import { baseApi } from '@/config'
console.log(baseApi)
rem 适配方案
postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值
安装并引入插件
cnpm install lib-flexible postcss-pxtorem --save-dev
// 移动端适配
import ‘lib-flexible/flexible’;
PostCSS 配置
创建.postcssrc.js
基本的 postcss 配置,可以在此配置的基础上根据项目需求进行修改
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
},
'postcss-pxtorem': {
rootValue: 75,
propList: ['*']
}
}
}
vm 适配方案
如果你想用 vw,你可以按照下面的方式切换。
安装依赖
npm install postcss-px-to-viewport -D
修改 .postcssrc.js
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
},
'postcss-px-to-viewport': {
viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
}
}
}
删除原来的 rem 相关代码
src/main.js 删除如下代码
// 移动端适配
import 'lib-flexible/flexible.js'
package.json 删除如下代码
"lib-flexible": "^0.3.2",
"postcss-pxtorem": "^5.1.1",
运行起来,F12 元素 css 就是 vw 单位了
VantUI 组件按需加载
Vant去查看
Sass 全局样式
你可能会遇到 node-sass 安装不成功,别放弃多试几次!!!
Vuex
这个就不用说了吧,应该都会安装
Vue-router
本案例采用 hash 模式,开发者根据需求修改 mode base
如果你使用了 history 模式,vue.config.js 中的 publicPath 要做对应的修改
Vue-router去这里看看
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const router = [
{
path: '/',
name: 'index',
component: () => import('@/views/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()
Axios 封装及接口管理
utils/request.js 封装 axios ,开发者需要根据后台接口做修改。
Webpack 4 vue.config.js 基础配置
如果你的 Vue Router 模式是 hash
publicPath: './',
如果你的 Vue Router 模式是 history 这里的 publicPath 和你的 Vue Router base 保持一直
publicPath: '/app/',
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
module.exports = {
publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
// publicPath: '/app/', // 署应用包时的基本 URL。 vue-router history模式使用
outputDir: 'dist', // 生产环境构建文件的目录
assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: !IS_PROD,
productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
devServer: {
port: 9020, // 端口号
open: false, // 启动后打开浏览器
overlay: {
// 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层
warnings: false,
errors: true
}
// ...
}
}
配置 alias 别名
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
module.exports = {
chainWebpack: config => {
// 添加别名
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('api', resolve('src/api'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components'))
}
}
配置 proxy 跨域
如果你的项目需要跨域设置,你需要打来 vue.config.js proxy 注释 并且配置相应参数
注意:你还需要将 src/config/env.development.js 里的 baseApi 设置成 ‘/’
module.exports = {
devServer: {
// ....
proxy: {
//配置跨域
'/api': {
target: 'https://test.xxx.com', // 接口的域名
// ws: true, // 是否启用websockets
changOrigin: true, // 开启代理,在本地创建一个虚拟服务端
pathRewrite: {
'^/api': '/'
}
}
}
}
}
使用 例如: src/api/home.js
export function getUserInfo(params) {
return request({
url: '/api/userinfo',
method: 'post',
data: qs.stringify(params)
})
}
配置 打包分析
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
chainWebpack: config => {
// 打包分析
if (IS_PROD) {
config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
{
analyzerMode: 'static'
}
])
}
}
}
npm run build
项目还没写完 后期在更新