• 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、有些图片引用失败 在buildwebpack.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文件

    在configindex.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)  
           }  
         } 

    -------------------------------------------

    个性签名:独学而无友,则孤陋而寡闻。做一个灵魂有趣的人!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!

    万水千山总是情,打赏一分行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主,哈哈哈(っ•̀ω•́)っ✎⁾⁾!

  • 相关阅读:
    select、poll和epoll
    Linux 常用命令之文件和目录
    SmartPlant Review 帮助文档机翻做培训手册
    SmartPlant Foundation 基础教程 3.4 菜单栏
    SmartPlant Foundation 基础教程 3.3 标题栏
    SmartPlant Foundation 基础教程 3.2 界面布局
    SmartPlant Foundation 基础教程 3.1 DTC登陆界面
    SmartPlant Foundation 基础教程 1.4 SPF架构
    SmartPlant Foundation 基础教程 1.3 SPF其他功能
    SmartPlant Foundation 基础教程 1.2 SPF集成设计功能
  • 原文地址:https://www.cnblogs.com/mahmud/p/11518647.html
Copyright © 2020-2023  润新知