vue/cli 3 的脚手架去掉了vue-cli 2 的 webpack.dev.config.js 的 webpack 配置文件,如果想要在 vue/cli3 中配置 webpack,就需要在项目的根目录下添加 vue.config.js 配置文件。下面将
devServer:
前端在vue-cli项目开发中,启动脚手架后,默认访问地址为 http://localhost:8080,
如果这时候要请求一个获取商品列表的接口,请求接口的地址为(举例):https://huodong.fanli.com/h5/activity86415/getGoodsList, 就存在跨域问题。
解决:
vue-cli 3脚手架为我们提供了 devServe 的本地服务器,用于本地开发时解决一系列配置问题。包括:跨域(域名、端口号)、热启动、重写等等。
const proxy = require('http-proxy-middleware');
module.exports = {
devServer: {
host: 'localhost',
port: 8081,
open: true,
proxy: {
'/activity86415': {
target: 'https://huodong.fanli.com/h5/activity86415',
changeOrigin: true,
pathRewrite: {
'^/activity86415': '/'
}
}
}
}
};
open: true
在devServer启动且第一次构建完成时,自动用我们的系统的默认浏览器去打开要开发的网页hot:true,
hot配置是否启用模块的热替换功能,devServer的默认行为是在发现源代码被变更后,通过自动刷新整个页面来做到事实预览,开启hot后,将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
hotOnly: false,
hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下,前者会自动刷新页面,后者不会刷新页面,而是在控制台输出热更新失败
关于vue-cli2,vue/cli3 的项目结构以及配置方面的区别,这里引用一下网上一位大神的文章,写的很详细:
vue-cli2、vue-cli3脚手架详细讲解 - じ★ve花之谷 - 博客园https://www.cnblogs.com/zhangchunping/p/15045033.html
vue.config.js 完整代码:
const proxy = require('http-proxy-middleware');
module.exports = {
// 基本路径,默认的'/'是绝对路径,如果不确定在根路径,改成相对路径'./'
publicPath:
process.env.NODE_ENV === "production"
? "/Public/activity86415/dist/"
: "/",
// 输出文件目录
outputDir: 'dist',
assetsDir:'static',
indexPath:'index.html',
lintOnSave: true, // eslint-loader 是否在保存的时候检查
css: {
extract: true, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: false, // 开启 CSS source maps?
loaderOptions: {
less: {
javascriptEnabled: true,
},
},
},
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title= '惊喜礼盒'
return args
})
},
devServer: {
host: 'localhost',
port: 8080,
proxy: {
'/activity86415': {
target: 'https://huodong.fanli.com/h5/activity86415',
changeOrigin: true,
pathRewrite: {
'^/activity86415': '/'
}
}
},
open: true,
hot:true,
hotOnly: false,
},
productionSourceMap: false // 生产环境是否生成 sourceMap 文件
};