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 中国大陆许可协议进行许可。

posted @   Mahmud(مەھمۇد)  阅读(295)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.

Not available