vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目

h5移动端项目模板

基于 vue-cli4.0 + wedpack 4 + vant ui + sass +rem 适调方案 + axios 封装，构架手机端模板手脚架

启动项目

git clone https://github.com/teach-tian/h5-vue-cli4.git

cd h5-vue-cli4

npm install

npm run serve

配置多环境变量

package.json里的script配置serve stage build ，通过 –mode xx来执行不同环境

• 通过 npm run serve 启动本地 ，执行 development
• 通过 npm run stage 打包检测，执行staging
• 通过npm run build打包正式，执行production
  配置介绍
  以VUE_app_开头的变量，在代码中可以通过process.env.VUE_APP_
  比如,VUE_APP_ENV = ‘development’ 通过process.env.VUE_APP_ENV 访问。
  除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL
  在项目目录中新建==.env.*==
  • .env.development 本地开发环境配置

     NODE_ENV='development'
     #must start with VUE_APP_
     VUE_APP_ENV = 'development'
    

  • .env.staging 测试环境配置

      NODE_ENV='production'
      # must start with VUE_APP_
      VUE_APP_ENV = 'staging'
    

  • .env.production 正式环境配置

    NODE_ENV='production'
    # must start with VUE_APP_
    VUE_APP_ENV = 'production'