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
