1、配置vue.config.js
const path = require('path')
// const { VantResolver } = require('unplugin-vue-components/resolvers')
// const ComponentsPlugin = require('unplugin-vue-components/webpack')
module.exports = {
/** 区分打包环境与开发环境
* process.env.NODE_ENV==='production' (打包环境)
* process.env.NODE_ENV==='development' (开发环境)
* baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
*/
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/', // 部署生产环境和开发环境下的URL:可对当前环境进行区分
outputDir: 'dist', // 输出文件目录:在npm run build时,生成文件的目录名称
assetsDir: 'assets', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, './src/assets/less/variable.less')]
}
},
devServer: {
overlay: {
warning: false,
errors: false
},
// https: true,
port: 9527,
proxy: {
'/xxx': { // 本地联调
// target: 'http://192.168.1.148',
target: 'http://192.168.1.171',
// target: 'http://192.168.1.13',
// target: 'http://192.168.1.106',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/xxx': ''
}
}
},
disableHostCheck: true
},
chainWebpack: config => {
// 隐藏console
config.when(process.env.NODE_ENV !== 'development', config => {
config.optimization.minimizer('terser').tap(options => {
options[0].terserOptions.compress.drop_console = true
return options
})
})
// 修复热更新
config.resolve.symlinks(true)
},
// 对象的形式配置configureWebpack
// configureWebpack: {
// plugins: [
// ComponentsPlugin({
// resolvers: [VantResolver()],
// }),
// ]
// }
}
2.配置package.json
"serve": "vue-cli-service serve",
"build": "vue-cli-service build", // 正式打包
"lint": "vue-cli-service lint",
"test": "vue-cli-service build --mode development" // 测试打包
3.新建.env.development 存放测试地址
NODE_ENV="development"
VUE_APP_URL="https://测试.com"
4.新建.env.production 存放正式地址
NODE_ENV="production"
VUE_APP_URL="https://正式.com"