vue-cli 项目中 需要知道常见的配置
1、配置打包后的文件路径
进入config>index.js把assetsPublicPath:'/'改成'./';
build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', productionSourceMap: false, productionGzip: false, productionGzipExtensions: ['js', 'css'] bundleAnalyzerReport: process.env.npm_config_report }
2、修改端口号8080为9090,防止端口冲突
进入config>index.js把修改port:9090
module.exports = { dev: { assetsSubDirectory: 'static', assetsPublicPath: '/ host: 'localhost', port: 9090,
3、配置proxyTable 解决开发环境中的跨域问题
module.exports = { dev: { proxyTable: { '/dianping': { target: 'http://****', changeOrigin: true, pathRewrite: { '^/dianping': '/dianping' //此字段根据自己项目填写 } } }
4、有些图片引用失败 在build\webpack.prod.conf.js 的限制limit注释掉
{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { // limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } },
5、去掉打包后不要的.map文件
在config\index.js 中把productionSourceMap:true改成productionSourceMap:false
build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', productionSourceMap: false, productionGzip: false, productionGzipExtensions: ['js', 'css'] bundleAnalyzerReport: process.env.npm_config_report },
6、build打包发布后css里的图片背景找不到文件
build文件里找到 utils.js 文件,修改如下: if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', //解决 build css bg img 加载路径不对问题 (添加的就是这行) fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } }
本文作者:Mahmud(مەھمۇد)
本文链接:https://www.cnblogs.com/mahmud/p/11518647.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
标签:
VUE项目汇总
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)