vue element项目相关

build
config
src
  --assets
  --components
     --Button
        index.vue
  --layout
    --components
       --Header
          index.vue
    index.vue
  --view
     --login
        index.vue
     --user
         --components
     index.vue
  App.vue
  main.js

components文件里的组件首字母大写
view页面页面文件字母小写
layout主页面布局结构

使用过程遇到的问题处理参考

一.打包后删除页面的console.log

在build文件中的webpack.prod.conf.js中的添加 pure_funcs:['console.log']

image.png

二.配置favicon

• 开发环境
  编辑webpack.dev.conf.js文件

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      favicon:'src/assets/images/favicon.ico',  //添加此行配置favicon的地址
      inject: true
    }),

• 打包环境
  编辑webpack.prod.conf.js文件

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      favicon:'src/assets/images/favicon.ico', //添加此行配置favicon的地址
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

三.不同的开发生产测试环境打包或者运行配置不同的接口IP地址

例如打包正式站，测试站，本地
（1） 安装cross-env

npm install cross-env --save-dev

（2）config文件下修改或添加文件

• 修改dev.env.js文件(用于运行项目的配置)

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"dev"',
  BASE_API:'"我是开发环境，我不在这设置API地址"' //本地运行接口API根路径不需要设置此处，每次换地址需要重启不方便
})

• 修改prod.env.js文件如下

'use strict'
module.exports = {//生产环境---正式站
  NODE_ENV: '"prod"',
  BASE_API:'"http://"', //正式站地址
  DIST_NAME:'prod',//打包文件夹名称
}

• 添加test.env.js文件如下

'use strict'
module.exports = {//生产环境---测试站
  NODE_ENV: '"test"',
  BASE_API:'"http://"', //测试站地址
  DIST_NAME:'test',//打包文件夹名称
}

• 添加local.env.jse文件如下

'use strict'
module.exports = {//生产环境--后台人员的本地
  NODE_ENV: '"local"',
  BASE_API:'"http://"',//后台人员本地地址
  DIST_NAME:'local',//打包文件夹名称
}

• 编辑index.js文件（设置不同环境下的打包文件夹，例如分别是dist/prod,dist/test,dist/local）

//添加此段
var env = require(path.resolve(__dirname,'./'+ process.env.NODE_ENV +'.env'));

 build: {
    index: path.resolve(__dirname, '../dist/'+ env.DIST_NAME +'/index.html'), //修改此处
    assetsRoot: path.resolve(__dirname, '../dist/'+ env.DIST_NAME),//修改此处
    assetsSubDirectory: 'static',
    assetsPublicPath: env.DIST_NAME,//修改此处

（3）编辑build文件下文件

• 编辑build.js文件

process.env.NODE_ENV = 'production' //删除文件中的此行代码

• 编辑webpack.prod.conf.js文件

//添加此段
let env=null
if(process.env.NODE_ENV==='prod'){
  env = require('../config/prod.env')
}else if(process.env.NODE_ENV==='test'){
  env = require('../config/test.env')
}else if(process.env.NODE_ENV==='local'){
  env = require('../config/local.env')
}

plugins: [
    new webpack.DefinePlugin({
      'process.env': env //修改此处
    }),

（4）package.json中添加三行

"scripts": {
    "dev": "cross-env NODE_ENV=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", // 添加cross-env NODE_ENV=dev
    "start": "npm run dev",
    "build": "node build/build.js",
    "build:local":"cross-env NODE_ENV=local node build/build.js", //打包本地
    "build:test":"cross-env NODE_ENV=test node build/build.js", //打包测试站
    "build:prod":"cross-env NODE_ENV=prod node build/build.js" //打包正式站
  },

（5）设置接口API的根路径
在src文件夹下新建一个api.config.js文件，内容如下

export const BASE_URL=(()=>{
    let BASE_API=null
    if(process.env.NODE_ENV==='dev'){//运行时随意切换API地址
        BASE_API='http://'  // 后台本地
      // BASE_API='http://'   // 测试站
      //  BASE_API='http://' // 正式站
    }else{ // 打包的相应API地址
        BASE_API=process.env.BASE_API
    }
    return BASE_API
})()

页面调用api接口只需要

import { BASE_URL } from "@/api.config.js";
axios.post(`${BASE_URL}/xxx`,data).then((res)=>{

项目打包命令分别是
npm run build:local
npm run build:test
npm run build:prod